@volverjs/style 0.1.29 → 0.1.30

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-graphic),
+					outline-offset: var(--spacing-2),
+				),
+			),
 		),
 		td: (
 			_alias: 'td',

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

@@ -15,10 +15,10 @@ $vv-text: (
 			margin-block: var(--spacing-16),
 		),
 		link: (
-			color: var(--color-brand),
+			color: var(--color-brand-readable),
 			state: (
 				focus-visible: (
-					outline: var(--spacing-px) solid var(--color-brand),
+					outline: var(--spacing-px) solid var(--color-brand-graphic),
 					outline-offset: var(--spacing-4),
 				),
 				hover: (
@@ -26,7 +26,7 @@ $vv-text: (
 					text-underline-offset: var(--spacing-4),
 				),
 				active: (
-					color: var(--color-brand-darken-3),
+					color: var(--color-brand-readable-strong),
 				),
 				disabled: (
 					opacity: var(--opacity-50),

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

@@ -53,7 +53,7 @@ $vv-textarea: (
 					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,
@@ -174,13 +174,13 @@ $vv-textarea: (
 					),
 				),
 				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),
 				),
 			),
 		),
@@ -195,13 +195,13 @@ $vv-textarea: (
 					),
 				),
 				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/themes/dark/components/_vv-checkbox.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-checkbox);
+
+@mixin theme-dark-vv-checkbox {
+	@include spread-theme-component(
+		$base-map: $vv-checkbox,
+		$theme-map: $dark-vv-checkbox,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components,
+		$zero-specificity: $zero-specificity-for-components
+	);
+}
+
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-checkbox;
+		}
+	}
+
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-checkbox;
+	}
+}

package/src/themes/dark/components/_vv-radio.scss

@@ -0,0 +1,27 @@
+@use 'sass:map';
+@use '../context' as *;
+
+$component-name: map.get($components-names, vv-radio);
+
+@mixin theme-dark-vv-radio {
+	@include spread-theme-component(
+		$base-map: $vv-radio,
+		$theme-map: $dark-vv-radio,
+		$component-name: $component-name,
+		$bps: $breakpoints,
+		$use-custom-props: $use-custom-props-for-components,
+		$zero-specificity: $zero-specificity-for-components
+	);
+}
+
+@include layer(themes, $use-css-layers, $layer-prefix) {
+	:where(:host, :root, .theme):not(.theme--light) {
+		@media (prefers-color-scheme: dark) {
+			@include theme-dark-vv-radio;
+		}
+	}
+
+	:where(.theme.theme--dark) {
+		@include theme-dark-vv-radio;
+	}
+}

package/src/themes/dark/components/index.scss

@@ -2,7 +2,9 @@
 @use 'vv-avatar';
 @use 'vv-badge';
 @use 'vv-button';
+@use 'vv-checkbox';
 @use 'vv-dropdown-action';
 @use 'vv-dropdown-option';
 @use 'vv-nav';
+@use 'vv-radio';
 @use 'vv-select';

package/src/themes/dark/props/_colors.scss

@@ -2,6 +2,12 @@
 
 @mixin theme-dark-colors {
 	@include spread-map-into-props($dark-colors, 'color');
+
+	// Safari 17 reads `l` as a percentage: the fixed steps of word and
+	// surface, calc(l - 12), resolve there only written in percent
+	@supports not (color: hsl(from red h s calc(l + 1))) {
+		@include spread-map-into-props(fixed-steps-in-percent($dark-colors), 'color');
+	}
 }
 
 @include layer(themes, $use-css-layers, $layer-prefix) {

package/src/themes/dark/settings/_colors.scss

@@ -7,49 +7,114 @@
 @use '../../../config' as config;
 
 $dark-color-scheme: dark !default;
-$dark-color-word: hsl(color-hue($color-brand) 15% 85%) !default;
-$dark-color-surface: hsl(color-hue($color-brand) 10% 5%) !default;
+
+// Hue from the light tint, as in the light theme: --color-tint is not
+// redeclared here, so a dark brand does not move the neutrals.
+$dark-color-word: hsl(color-hue($color-tint) 15% 85%) !default;
+$dark-color-surface: hsl(color-hue($color-tint) 10% 5%) !default;
+
+// Lightness of the tinted surfaces in the dark theme
+$dark-color-surface-tint-lightness: 10% !default;
+
+// Lightness between two neutral surfaces in the dark theme
+$dark-color-surface-scale: 5% !default;
+
+// `readable-strong` in the dark theme: `readable` with its luminance scaled
+// by this, toward white. The text roles are redeclared here, so they follow
+// the theme in every component and a light rule needs no dark override for
+// its text color.
+$dark-color-readable-strong-factor: 1.5 !default;
+
+// The luminance the roles are moved to, on the neutral surfaces down to
+// $color-readable-depth and on the hardest tinted surface of any hue, as in
+// the light theme
+$dark-color-readable-luminance: readable-luminance(
+	readable-surface($dark-color-surface, $color-readable-depth * $dark-color-surface-scale),
+	$color-readable-ratio
+) !default;
+$dark-color-surface-readable-luminance: readable-luminance(
+	readable-worst-tint($dark-color-surface-tint-lightness),
+	$color-readable-ratio
+) !default;
+$dark-color-graphic-luminance: readable-luminance(
+	readable-surface($dark-color-surface, $color-readable-depth * $dark-color-surface-scale),
+	$color-graphic-ratio
+) !default;
 
 // Surface palette for dark theme
 $dark-color-surface-palette: if(
 	sass(config.$use-color-mix):
 		(
-			brand: string.unquote('hsl(from var(--color-brand) h s 10%)'),
-			accent: string.unquote('hsl(from var(--color-accent) h s 10%)'),
-			success: string.unquote('hsl(from var(--color-success) h s 10%)'),
-			danger: string.unquote('hsl(from var(--color-danger) h s 10%)'),
-			info: string.unquote('hsl(from var(--color-info) h s 10%)'),
-			warning: string.unquote('hsl(from var(--color-warning) h s 10%)'),
+			brand: string.unquote('hsl(from var(--color-brand) h s #{$dark-color-surface-tint-lightness})'),
+			accent: string.unquote('hsl(from var(--color-accent) h s #{$dark-color-surface-tint-lightness})'),
+			success: string.unquote('hsl(from var(--color-success) h s #{$dark-color-surface-tint-lightness})'),
+			danger: string.unquote('hsl(from var(--color-danger) h s #{$dark-color-surface-tint-lightness})'),
+			info: string.unquote('hsl(from var(--color-info) h s #{$dark-color-surface-tint-lightness})'),
+			warning: string.unquote('hsl(from var(--color-warning) h s #{$dark-color-surface-tint-lightness})'),
 		);
 	else:
 		(
-			brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) 10%),
-			accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) 10%),
-			success: hsl(var(--color-success-hue) var(--color-success-saturation) 10%),
-			danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) 10%),
-			info: hsl(var(--color-info-hue) var(--color-info-saturation) 10%),
-			warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) 10%),
+			brand: hsl(var(--color-brand-hue) var(--color-brand-saturation) $dark-color-surface-tint-lightness),
+			accent: hsl(var(--color-accent-hue) var(--color-accent-saturation) $dark-color-surface-tint-lightness),
+			success: hsl(var(--color-success-hue) var(--color-success-saturation) $dark-color-surface-tint-lightness),
+			danger: hsl(var(--color-danger-hue) var(--color-danger-saturation) $dark-color-surface-tint-lightness),
+			info: hsl(var(--color-info-hue) var(--color-info-saturation) $dark-color-surface-tint-lightness),
+			warning: hsl(var(--color-warning-hue) var(--color-warning-saturation) $dark-color-surface-tint-lightness),
 		)
 ) !default;
 
 // color map
-$dark-colors: if(
-	sass(config.$use-color-mix):
-		(
-			scheme: $dark-color-scheme,
-			word: color-mix-darken-map($dark-color-word, 'word', $steps: 5, $scale: 12%),
-			surface: map.merge(
-				color-mix-lighten-map($dark-color-surface, 'surface', $steps: 5, $scale: 5%),
-				$dark-color-surface-palette
-			),
-		);
-	else:
+$dark-colors: map.deep-merge(
+	if(
+		sass(config.$use-color-mix):
+			(
+				scheme: $dark-color-scheme,
+				word: color-mix-darken-map(
+					tinted-neutral-value($dark-color-word, $color-tint, 15%, 85%),
+					'word',
+					$steps: 5,
+					$scale: 12%
+				),
+				surface: map.merge(
+					color-mix-lighten-map(
+						tinted-neutral-value($dark-color-surface, $color-tint, 10%, 5%),
+						'surface',
+						$steps: 5,
+						$scale: $dark-color-surface-scale
+					),
+					$dark-color-surface-palette
+				),
+			);
+		else:
+			(
+				scheme: $dark-color-scheme,
+				word: color-darken-map($dark-color-word, 'word', $scale: 12%, $fixed: true),
+				surface: map.merge(
+					color-lighten-map(
+						$dark-color-surface,
+						'surface',
+						$scale: $dark-color-surface-scale,
+						$fixed: true,
+						$inverted: false
+					),
+					$dark-color-surface-palette
+				),
+			)
+	),
+	readable-roles(
 		(
-			scheme: $dark-color-scheme,
-			word: color-darken-map($dark-color-word, 'word', $scale: 12%, $fixed: true),
-			surface: map.merge(
-				color-lighten-map($dark-color-surface, 'surface', $scale: 5%, $fixed: true, $inverted: false),
-				$dark-color-surface-palette
-			),
-		)
+			brand: $color-brand,
+			accent: $color-accent,
+			success: $color-success,
+			danger: $color-danger,
+			info: $color-info,
+			warning: $color-warning,
+		),
+		$dark-color-readable-luminance,
+		$dark-color-surface-readable-luminance,
+		$dark-color-graphic-luminance,
+		$dark-color-readable-strong-factor,
+		$lighten: color-luminance($dark-color-surface) < contrast-threshold(),
+		$relative: config.$use-color-mix
+	)
 ) !default;

package/src/themes/dark/settings/_index.scss

@@ -5,7 +5,9 @@
 @forward 'components/vv-avatar';
 @forward 'components/vv-badge';
 @forward 'components/vv-button';
+@forward 'components/vv-checkbox';
 @forward 'components/vv-dropdown-action';
 @forward 'components/vv-dropdown-option';
 @forward 'components/vv-nav';
+@forward 'components/vv-radio';
 @forward 'components/vv-select';

package/src/themes/dark/settings/_input.scss

@@ -1,8 +1,4 @@
-$dark-input: (
-	invalid: (
-		color: var(--color-danger-lighten-2),
-	),
-	valid: (
-		color: var(--color-success-lighten-2),
-	),
-) !default;
+// The bars and the borders of a valid or invalid field read the graphic roles
+// of success and danger, which the dark theme redeclares, so the fields
+// follow it with nothing here
+$dark-input: () !default;

package/src/themes/dark/settings/components/_choice.scss

@@ -0,0 +1,15 @@
+// Dark values of the modifiers shared by `vv-radio` and `vv-checkbox`, like
+// `src/settings/components/_choice.scss` on the light side. Loaded by both
+// dark maps and not forwarded.
+
+// The chosen tile of a segmented control is raised on the plain surface in
+// the light theme. In the dark one the plain surface is the darkest colour
+// there is and would read as a hole in the `surface-2` track, so the tile
+// takes a lighter step instead.
+$dark-choice-segment: (
+	state: (
+		checked-within: (
+			background-color: var(--color-surface-4),
+		),
+	),
+);

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

@@ -12,48 +12,6 @@ $dark-vv-alert: (
 				),
 			),
 		),
-		success: (
-			element: (
-				header: (
-					color: var(--color-success-lighten-3),
-				),
-			),
-		),
-		warning: (
-			element: (
-				header: (
-					color: var(--color-warning),
-				),
-			),
-		),
-		danger: (
-			element: (
-				header: (
-					color: var(--color-danger-lighten-5),
-				),
-			),
-		),
-		accent: (
-			element: (
-				header: (
-					color: var(--color-accent-lighten-4),
-				),
-			),
-		),
-		brand: (
-			element: (
-				header: (
-					color: var(--color-brand-lighten-3),
-				),
-			),
-		),
-		info: (
-			element: (
-				header: (
-					color: var(--color-info),
-				),
-			),
-		),
 		notification: (
 			border-color: var(--color-gray-lighten-3),
 			modifier: (
@@ -61,7 +19,7 @@ $dark-vv-alert: (
 					border-color: var(--color-danger-lighten-3),
 					element: (
 						header: (
-							color: var(--color-white)
+							color: var(--color-danger-contrast)
 						),
 					),
 				),
@@ -69,7 +27,7 @@ $dark-vv-alert: (
 					border-color: var(--color-brand-lighten-3),
 					element: (
 						header: (
-							color: var(--color-white)
+							color: var(--color-brand-contrast)
 						),
 					),
 				),
@@ -77,7 +35,7 @@ $dark-vv-alert: (
 					border-color: var(--color-success-lighten-3),
 					element: (
 						header: (
-							color: var(--color-white)
+							color: var(--color-success-contrast)
 						),
 					),
 				),
@@ -85,7 +43,7 @@ $dark-vv-alert: (
 					border-color: var(--color-accent-lighten-3),
 					element: (
 						header: (
-							color: var(--color-white)
+							color: var(--color-accent-contrast)
 						),
 					),
 				),
@@ -93,7 +51,7 @@ $dark-vv-alert: (
 					border-color: var(--color-warning-darken-5),
 					element: (
 						header: (
-							color: var(--color-white),
+							color: var(--color-warning-darken-5-contrast),
 							background-color: var(--color-warning-darken-5),
 						),
 					),
@@ -102,7 +60,7 @@ $dark-vv-alert: (
 					border-color: var(--color-info-darken-2),
 					element: (
 						header: (
-							color: var(--color-white),
+							color: var(--color-info-darken-5-contrast),
 							background-color: var(--color-info-darken-5),
 						),
 					),

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

@@ -1,26 +1,11 @@
 $dark-vv-avatar: (
 	modifier: (
+		// The colored rings take the readable roles, which follow the theme
 		ring: (
-			color: var(--color-brand-lighten-3),
 			modifier: (
-				danger: (
-					color: var(--color-danger-lighten-5),
-				),
-				success: (
-					color: var(--color-success-lighten-3),
-				),
-				warning: (
-					color: var(--color-warning),
-				),
 				gray: (
 					color: var(--color-gray-lighten-3),
 				),
-				info: (
-					color: var(--color-info),
-				),
-				accent: (
-					color: var(--color-accent-lighten-5),
-				),
 				surface: (
 					color: var(--color-word-2),
 				),