@volverjs/style 0.1.29 → 0.1.30-beta.1

package/src/settings/_colors.scss

@@ -20,34 +20,88 @@ $color-success: #178230 !default;
 $color-danger: #af2323 !default;
 $color-info: #31ccec !default;
 $color-warning: #e7b735 !default;
-$color-gray: hsl(color-hue($color-brand) 15% 50%) !default;
-$color-word: hsl(color-hue($color-brand) 15% 10%) !default;
-$color-surface: hsl(color-hue($color-brand) 10% 100%) !default;
-$color-shadow: hsl(color-hue($color-brand) 50% 20%) !default;
-$color-backdrop: hsla(color-hue($color-brand) 50% 20% / 20%) !default;
+
+// The neutrals below take their hue from the tint, the light brand unless set.
+// With $use-color-mix it is also emitted as --color-tint, and each neutral
+// still at its default is written relative to it, so a runtime override of
+// --color-tint moves them. The dark theme does not redeclare it.
+$color-tint: $color-brand !default;
+$color-gray: hsl(color-hue($color-tint) 15% 50%) !default;
+$color-word: hsl(color-hue($color-tint) 15% 10%) !default;
+$color-surface: hsl(color-hue($color-tint) 10% 100%) !default;
+$color-shadow: hsl(color-hue($color-tint) 50% 20%) !default;
+$color-backdrop: hsla(color-hue($color-tint) 50% 20% / 20%) !default;
 $color-alpha: hsl(0deg 0% 0% / 0%) !default;
 
+// Text written in a palette color keeps this contrast ratio with what it
+// sits on. WCAG asks for 4.5; 4.6 leaves room for the rounding to 8-bit
+// channels.
+$color-readable-ratio: 4.6 !default;
+
+// A palette color that has to be seen but not read, a bar, a focus ring or a
+// state border, keeps this one. WCAG asks for 3 to graphics and to the parts
+// of a control that show its state.
+$color-graphic-ratio: 3.1 !default;
+
+// Lightness of the tinted surfaces, --color-surface-brand and the others
+$color-surface-tint-lightness: 90% !default;
+
+// Lightness between two neutral surfaces, --color-surface to --color-surface-5
+$color-surface-scale: 2% !default;
+
+// The text roles of each palette color, readable-roles(): `readable`,
+// --color-brand-readable, the text on the neutral surfaces (links, outlined
+// badges, tabs, hints); `readable-strong`, a step further from them (a
+// pressed link, the current crumb); and --color-surface-brand-readable, the text on the
+// tinted surface of the color (alerts, ring avatars, dropdown options). Each
+// one is the color itself while it reads, and the color moved just far
+// enough otherwise, so a brand set at runtime keeps its hue and stays as
+// vivid as it can.
+// The roles read on the neutral surfaces down to this one: 2 is
+// --color-surface-2, a hovered row or a pressed action.
+$color-readable-depth: 2 !default;
+
+// `readable-strong` is `readable` with its luminance scaled by this
+$color-readable-strong-factor: 0.5 !default;
+
+// The luminance the roles are moved to, on the neutral surfaces and on the
+// tinted ones. Both are computed on the hardest hue (readable-surface() and
+// readable-worst-tint()): the neutrals take theirs from --color-tint, the
+// tinted surfaces from their color, and either can change at runtime.
+$color-readable-luminance: readable-luminance(
+	readable-surface($color-surface, -$color-readable-depth * $color-surface-scale),
+	$color-readable-ratio
+) !default;
+$color-surface-readable-luminance: readable-luminance(
+	readable-worst-tint($color-surface-tint-lightness),
+	$color-readable-ratio
+) !default;
+$color-graphic-luminance: readable-luminance(
+	readable-surface($color-surface, -$color-readable-depth * $color-surface-scale),
+	$color-graphic-ratio
+) !default;
+
 // ============================================
 // Surface Palette (semantic surface colors)
 // ============================================
 $color-surface-palette: if(
 	sass(config.$use-color-mix):
 		(
-			brand: string.unquote('hsl(from var(--color-brand) h s 90%)'),
-			accent: string.unquote('hsl(from var(--color-accent) h s 90%)'),
-			success: string.unquote('hsl(from var(--color-success) h s 90%)'),
-			danger: string.unquote('hsl(from var(--color-danger) h s 90%)'),
-			info: string.unquote('hsl(from var(--color-info) h s 90%)'),
-			warning: string.unquote('hsl(from var(--color-warning) h s 90%)'),
+			brand: string.unquote('hsl(from var(--color-brand) h s #{$color-surface-tint-lightness})'),
+			accent: string.unquote('hsl(from var(--color-accent) h s #{$color-surface-tint-lightness})'),
+			success: string.unquote('hsl(from var(--color-success) h s #{$color-surface-tint-lightness})'),
+			danger: string.unquote('hsl(from var(--color-danger) h s #{$color-surface-tint-lightness})'),
+			info: string.unquote('hsl(from var(--color-info) h s #{$color-surface-tint-lightness})'),
+			warning: string.unquote('hsl(from var(--color-warning) h s #{$color-surface-tint-lightness})'),
 		);
 	else:
 		(
-			brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 90%),
-			accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 90%),
-			success: hsl(var(--color-success-hue) var(--color-success-saturation) 90%),
-			danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 90%),
-			info: hsl(var(--color-info-hue) var(--color-info-saturation) 90%),
-			warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 90%),
+			brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) $color-surface-tint-lightness),
+			accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) $color-surface-tint-lightness),
+			success: hsl(var(--color-success-hue) var(--color-success-saturation) $color-surface-tint-lightness),
+			danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) $color-surface-tint-lightness),
+			info: hsl(var(--color-info-hue) var(--color-info-saturation) $color-surface-tint-lightness),
+			warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) $color-surface-tint-lightness),
 		)
 ) !default;
 
@@ -55,49 +109,95 @@ $color-surface-palette: if(
 // Colors Map
 // Override this map or use map.merge() to customize
 // ============================================
-$colors: if(
-	sass(config.$use-color-mix):
-		(
-			scheme: $color-scheme,
-			transparent: $color-transparent,
-			shadow: color-base-map($color-shadow, 'shadow'),
-			backdrop: color-base-map($color-backdrop, 'backdrop'),
-			black: color-base-map($color-black, 'black'),
-			white: color-base-map($color-white, 'white'),
-			word: color-mix-lighten-map($color-word, 'word', $steps: 5, $scale: 12%),
-			surface: map.merge(
-				color-mix-darken-map($color-surface, 'surface', $steps: 5, $scale: 2%),
-				$color-surface-palette
-			),
-			alpha: color-mix-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
-			brand: color-mix-shades-map($color-brand, 'brand'),
-			accent: color-mix-shades-map($color-accent, 'accent'),
-			success: color-mix-shades-map($color-success, 'success'),
-			danger: color-mix-shades-map($color-danger, 'danger'),
-			info: color-mix-shades-map($color-info, 'info'),
-			warning: color-mix-shades-map($color-warning, 'warning'),
-			gray: color-mix-shades-map($color-gray, 'gray', $scale: 15%),
-		);
-	else:
+
+// Each palette color gets the tokens for text on it ($text): `contrast`,
+// --color-<name>-contrast, pure white or pure black, whichever gives the text
+// on the fill the higher WCAG contrast ratio, and a `cover`, the fill under
+// that text, which vv-button lays over its emboss, both for the base and every
+// darker shade. The text roles of readable-roles() are merged in last.
+// With $use-color-mix all of them are computed in CSS and follow a runtime
+// override of the color; otherwise the contrast and the shade each role
+// takes are chosen at compile time.
+
+// The saturation and lightness passed to tinted-neutral-value() repeat the
+// defaults above: a neutral that no longer matches its default was set
+// explicitly, and keeps its literal value.
+$colors: map.deep-merge(
+	if(
+		sass(config.$use-color-mix):
+			(
+				scheme: $color-scheme,
+				transparent: $color-transparent,
+				tint: $color-tint,
+				shadow: color-base-map(tinted-neutral-value($color-shadow, $color-tint, 50%, 20%), 'shadow'),
+				backdrop: color-base-map(tinted-neutral-value($color-backdrop, $color-tint, 50%, 20%, 20%), 'backdrop'),
+				black: color-base-map($color-black, 'black'),
+				white: color-base-map($color-white, 'white'),
+				word: color-mix-lighten-map(
+					tinted-neutral-value($color-word, $color-tint, 15%, 10%),
+					'word',
+					$steps: 5,
+					$scale: 12%
+				),
+				surface: map.merge(
+					color-mix-darken-map(
+						tinted-neutral-value($color-surface, $color-tint, 10%, 100%),
+						'surface',
+						$steps: 5,
+						$scale: $color-surface-scale
+					),
+					$color-surface-palette
+				),
+				alpha: color-mix-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
+				brand: color-mix-shades-map($color-brand, 'brand', $text: true),
+				accent: color-mix-shades-map($color-accent, 'accent', $text: true),
+				success: color-mix-shades-map($color-success, 'success', $text: true),
+				danger: color-mix-shades-map($color-danger, 'danger', $text: true),
+				info: color-mix-shades-map($color-info, 'info', $text: true),
+				warning: color-mix-shades-map($color-warning, 'warning', $text: true),
+				gray: color-mix-shades-map(
+					tinted-neutral-value($color-gray, $color-tint, 15%, 50%),
+					'gray',
+					$scale: 15%
+				),
+			);
+		else:
+			(
+				scheme: $color-scheme,
+				transparent: $color-transparent,
+				shadow: hsla-map($color-shadow, 'shadow'),
+				backdrop: hsla-map($color-backdrop, 'backdrop'),
+				black: hsla-map($color-black, 'black'),
+				white: hsla-map($color-white, 'white'),
+				word: color-lighten-map($color-word, 'word', $scale: 12%, $fixed: true, $inverted: false),
+				surface: map.merge(
+					color-darken-map($color-surface, 'surface', $scale: $color-surface-scale, $fixed: true),
+					$color-surface-palette
+				),
+				alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
+				brand: color-shades-map($color-brand, 'brand', $text: true),
+				accent: color-shades-map($color-accent, 'accent', $text: true),
+				success: color-shades-map($color-success, 'success', $text: true),
+				danger: color-shades-map($color-danger, 'danger', $text: true),
+				info: color-shades-map($color-info, 'info', $text: true),
+				warning: color-shades-map($color-warning, 'warning', $text: true),
+				gray: color-shades-map($color-gray, 'gray', $scale: 15%),
+			)
+	),
+	readable-roles(
 		(
-			scheme: $color-scheme,
-			transparent: $color-transparent,
-			shadow: hsla-map($color-shadow, 'shadow'),
-			backdrop: hsla-map($color-backdrop, 'backdrop'),
-			black: hsla-map($color-black, 'black'),
-			white: hsla-map($color-white, 'white'),
-			word: color-lighten-map($color-word, 'word', $scale: 12%, $fixed: true, $inverted: false),
-			surface: map.merge(
-				color-darken-map($color-surface, 'surface', $scale: 2%, $fixed: true),
-				$color-surface-palette
-			),
-			alpha: color-alpha-map($color-alpha, 'alpha', $steps: 5, $scale: 0.05),
-			brand: color-shades-map($color-brand, 'brand'),
-			accent: color-shades-map($color-accent, 'accent'),
-			success: color-shades-map($color-success, 'success'),
-			danger: color-shades-map($color-danger, 'danger'),
-			info: color-shades-map($color-info, 'info'),
-			warning: color-shades-map($color-warning, 'warning'),
-			gray: color-shades-map($color-gray, 'gray', $scale: 15%),
-		)
+			brand: $color-brand,
+			accent: $color-accent,
+			success: $color-success,
+			danger: $color-danger,
+			info: $color-info,
+			warning: $color-warning,
+		),
+		$color-readable-luminance,
+		$color-surface-readable-luminance,
+		$color-graphic-luminance,
+		$color-readable-strong-factor,
+		$lighten: color-luminance($color-surface) < contrast-threshold(),
+		$relative: config.$use-color-mix
+	)
 ) !default;

package/src/settings/_index.scss

@@ -32,6 +32,7 @@
 @forward 'components/vv-dropdown-action';
 @forward 'components/vv-dropdown-option';
 @forward 'components/vv-dropdown-optgroup';
+@forward 'components/vv-empty';
 @forward 'components/vv-checkbox';
 @forward 'components/vv-checkbox-group';
 @forward 'components/vv-radio';
@@ -41,12 +42,37 @@
 @forward 'components/vv-input-file';
 @forward 'components/vv-input-range';
 @forward 'components/vv-input-text';
+
+// After vv-input-text, which it loads: forwarded first, it would load that
+// map unconfigured and a `with` on it would fail
+@forward 'components/vv-field';
+@forward 'components/vv-item';
+@forward 'components/vv-item-group';
 @forward 'components/vv-nav';
+@forward 'components/vv-pagination';
 @forward 'components/vv-progress';
+@forward 'components/vv-prose';
 @forward 'components/vv-select';
+@forward 'components/vv-separator';
 @forward 'components/vv-skeleton';
+@forward 'components/vv-spinner';
 @forward 'components/vv-tab';
 @forward 'components/vv-table';
 @forward 'components/vv-text';
 @forward 'components/vv-textarea';
 @forward 'components/vv-tooltip';
+@forward 'components/vv-attachment';
+@forward 'components/vv-attachment-group';
+@forward 'components/vv-bubble';
+@forward 'components/vv-bubble-group';
+@forward 'components/vv-marker';
+@forward 'components/vv-message';
+@forward 'components/vv-message-scroller';
+@forward 'components/vv-questionnaire';
+@forward 'components/vv-calendar';
+@forward 'components/vv-command';
+@forward 'components/vv-input-otp';
+@forward 'components/vv-kbd';
+@forward 'components/vv-kbd-group';
+@forward 'components/vv-popover';
+@forward 'components/vv-sidebar';

package/src/settings/_input.scss

@@ -38,6 +38,9 @@ $input: (
 		display: block,
 		font-size: var(--text-12),
 		gap: var(--spacing-8),
+		// Read by the hint of every field as `--input-hint-max-width`, which
+		// was never declared: the declaration was invalid and did nothing
+		max-width: 100%,
 		overflow: hidden,
 		text-overflow: ellipsis,
 		white-space: nowrap,
@@ -45,11 +48,17 @@ $input: (
 	placeholder: (
 		color: var(--color-word-4),
 	),
+	// The color of a valid or invalid field paints its bar and its border;
+	// its hint and its label take text-color, the readable role of the same
+	// palette color, which follows the theme. An override of the color needs
+	// one of the text as well.
 	valid: (
 		color: var(--color-success),
+		text-color: var(--color-success-readable),
 	),
 	invalid: (
 		color: var(--color-danger),
+		text-color: var(--color-danger-readable),
 	),
 	floating: (
 		padding-top: calc(var(--input-spacing-top) + 0.55em),

package/src/settings/components/_choice.scss

@@ -0,0 +1,104 @@
+// Modifiers shared by `vv-radio` and `vv-checkbox`, the two ways of drawing an
+// option as something other than a control beside a label. Loaded by both
+// component maps and not forwarded by `settings/_index.scss`: to change one,
+// deep-merge `modifier.segment` or `modifier.card` of `$vv-radio` or
+// `$vv-checkbox`, which hold their own copy.
+
+// One option of a segmented control (`--segmented` on the group). The native
+// input stays in the tree for the keyboard and assistive technology but is
+// not painted: the tile is the control. Chosen, the tile is raised out of the
+// recessed track; the keyboard focus draws the outline every control of the
+// library draws, on the tile rather than on the hidden input. The label
+// centres the icon and the text, because `@volverjs/ui-vue` wraps the slot in
+// a `__label` span that the block stretches with `flex: 1`.
+$choice-segment: (
+	position: relative,
+	display: flex,
+	flex: 1,
+	flex-wrap: nowrap,
+	align-items: center,
+	justify-content: center,
+	min-width: 0,
+	min-height: calc(var(--input-min-height) - var(--spacing-8)),
+	margin: 0,
+	padding: 0 var(--spacing-12),
+	border-radius: var(--rounded-md),
+	color: var(--color-word-2),
+	white-space: nowrap,
+	transition: (
+		background-color var(--duration-150) var(--ease-out),
+		color var(--duration-150) var(--ease-out),
+		box-shadow var(--duration-150) var(--ease-out),
+	),
+	element: (
+		label: (
+			display: flex,
+			align-items: center,
+			justify-content: center,
+			gap: var(--spacing-8),
+		),
+		input: (
+			position: absolute,
+			width: var(--spacing-px),
+			min-width: 0,
+			height: var(--spacing-px),
+			margin: 0,
+			border: 0,
+			opacity: 0,
+			pointer-events: none,
+		),
+	),
+	state: (
+		hover: (
+			color: var(--color-word),
+		),
+		checked-within: (
+			color: var(--color-word),
+			font-weight: var(--font-semibold),
+			background-color: var(--color-surface),
+			box-shadow: var(--shadow-sm),
+		),
+		focus-visible-within: (
+			outline: var(--spacing-px) solid var(--color-brand),
+			outline-offset: var(--spacing-2),
+		),
+	),
+);
+
+// An option drawn as a bordered tile, the control at the start and a title
+// over a description beside it: a plan, a channel, a way of doing a thing
+// that needs a line of explanation. The frame takes the hairline of the other
+// frames of the library, and the chosen tile is marked by a step of surface
+// and a border in the text colour, not by a colour of its own. The tiles of a
+// row (`--cards` on the group) share the width and wrap under 8rem.
+$choice-card: (
+	display: flex,
+	flex: 1,
+	flex-wrap: nowrap,
+	align-items: flex-start,
+	gap: var(--spacing-16),
+	min-width: var(--spacing-128),
+	margin: 0,
+	padding: var(--spacing-16),
+	border: var(--border) solid var(--color-surface-4),
+	border-radius: var(--rounded-lg),
+	transition: (
+		background-color var(--duration-150) var(--ease-out),
+		border-color var(--duration-150) var(--ease-out),
+	),
+	element: (
+		input: (
+			flex-shrink: 0,
+			margin: 0,
+		),
+	),
+	state: (
+		hover: (
+			border-color: var(--color-surface-5),
+		),
+		checked-within: (
+			border-color: var(--color-word),
+			background-color: var(--color-surface-1),
+		),
+	),
+);

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

@@ -78,10 +78,10 @@ $vv-alert: (
 			background-color: var(--color-surface-success),
 			element: (
 				icon: (
-					color: var(--color-success-darken-1),
+					color: var(--color-surface-success-readable),
 				),
 				header: (
-					color: var(--color-success-darken-1),
+					color: var(--color-surface-success-readable),
 				),
 			),
 		),
@@ -90,10 +90,10 @@ $vv-alert: (
 			background-color: var(--color-surface-danger),
 			element: (
 				icon: (
-					color: var(--color-danger),
+					color: var(--color-surface-danger-readable),
 				),
 				header: (
-					color: var(--color-danger),
+					color: var(--color-surface-danger-readable),
 				),
 			),
 		),
@@ -102,10 +102,10 @@ $vv-alert: (
 			background-color: var(--color-surface-warning),
 			element: (
 				icon: (
-					color: var(--color-warning-darken-5),
+					color: var(--color-surface-warning-readable),
 				),
 				header: (
-					color: var(--color-warning-darken-5),
+					color: var(--color-surface-warning-readable),
 				),
 			),
 		),
@@ -114,10 +114,10 @@ $vv-alert: (
 			background-color: var(--color-surface-info),
 			element: (
 				icon: (
-					color: var(--color-info-darken-5),
+					color: var(--color-surface-info-readable),
 				),
 				header: (
-					color: var(--color-info-darken-5),
+					color: var(--color-surface-info-readable),
 				),
 			),
 		),
@@ -126,10 +126,10 @@ $vv-alert: (
 			background-color: var(--color-surface-accent),
 			element: (
 				icon: (
-					color: var(--color-accent),
+					color: var(--color-surface-accent-readable),
 				),
 				header: (
-					color: var(--color-accent),
+					color: var(--color-surface-accent-readable),
 				),
 			),
 		),
@@ -138,10 +138,10 @@ $vv-alert: (
 			background-color: var(--color-surface-brand),
 			element: (
 				icon: (
-					color: var(--color-brand-darken-3),
+					color: var(--color-surface-brand-readable),
 				),
 				header: (
-					color: var(--color-brand-darken-3),
+					color: var(--color-surface-brand-readable),
 				),
 			),
 		),
@@ -208,6 +208,10 @@ $vv-alert: (
 					element: (
 						header: (
 							background-color: var(--color-success),
+							color: var(--color-success-contrast),
+						),
+						icon: (
+							color: var(--color-success-contrast),
 						),
 					),
 				),
@@ -216,14 +220,23 @@ $vv-alert: (
 					element: (
 						header: (
 							background-color: var(--color-danger),
+							color: var(--color-danger-contrast),
+						),
+						icon: (
+							color: var(--color-danger-contrast),
 						),
 					),
 				),
+				// Warning and info fill with the darkest shade, and take its contrast
 				warning: (
 					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
 							background-color: var(--color-warning-darken-5),
+							color: var(--color-warning-darken-5-contrast),
+						),
+						icon: (
+							color: var(--color-warning-darken-5-contrast),
 						),
 					),
 				),
@@ -232,6 +245,10 @@ $vv-alert: (
 					element: (
 						header: (
 							background-color: var(--color-info-darken-5),
+							color: var(--color-info-darken-5-contrast),
+						),
+						icon: (
+							color: var(--color-info-darken-5-contrast),
 						),
 					),
 				),
@@ -240,6 +257,10 @@ $vv-alert: (
 					element: (
 						header: (
 							background-color: var(--color-accent),
+							color: var(--color-accent-contrast),
+						),
+						icon: (
+							color: var(--color-accent-contrast),
 						),
 					),
 				),
@@ -248,6 +269,10 @@ $vv-alert: (
 					element: (
 						header: (
 							background-color: var(--color-brand),
+							color: var(--color-brand-contrast),
+						),
+						icon: (
+							color: var(--color-brand-contrast),
 						),
 					),
 				),

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

@@ -0,0 +1,10 @@
+// A row of attachments that wraps, the tray above a composer or the files of
+// a message. The top padding leaves room for the `remove` buttons, which hang
+// over the top edge of each tile.
+$vv-attachment-group: (
+	display: flex,
+	flex-wrap: wrap,
+	gap: var(--spacing-12),
+	padding-block-start: var(--spacing-12),
+	padding-inline-end: var(--spacing-12),
+) !default;