@volverjs/style 0.1.29 → 0.1.30-beta.1

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

@@ -15,7 +15,7 @@ $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),
@@ -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

@@ -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/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),
 				),

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

@@ -1,46 +1,15 @@
+// The colored variants take the readable roles, which follow the theme
 $dark-vv-badge: (
 	modifier: (
 		outline: (
-			color: var(--color-brand-lighten-3),
 			modifier: (
-				danger: (
-					color: var(--color-danger-lighten-3),
-				),
-				success: (
-					color: var(--color-success-lighten-3),
-				),
-				warning: (
-					color: var(--color-warning),
-				),
-				info: (
-					color: var(--color-info),
-				),
-				accent: (
-					color: var(--color-accent-lighten-3),
-				),
 				gray: (
 					color: var(--color-gray-lighten-3),
 				),
 			),
 		),
 		ghost: (
-			color: var(--color-brand-lighten-3),
 			modifier: (
-				danger: (
-					color: var(--color-danger-lighten-3),
-				),
-				success: (
-					color: var(--color-success-lighten-3),
-				),
-				warning: (
-					color: var(--color-warning),
-				),
-				info: (
-					color: var(--color-info),
-				),
-				accent: (
-					color: var(--color-accent-lighten-3),
-				),
 				gray: (
 					color: var(--color-gray-lighten-3),
 				),

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

@@ -50,13 +50,5 @@ $dark-vv-button: (
 				),
 			),
 		),
-		link: (
-			color: var(--color-brand-lighten-3),
-			state: (
-				active: (
-					color: var(--color-brand-lighten-2),
-				),
-			),
-		),
 	),
 ) !default;

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

@@ -0,0 +1,7 @@
+@use 'choice' as *;
+
+$dark-vv-checkbox: (
+	modifier: (
+		segment: $dark-choice-segment,
+	),
+);

package/src/themes/dark/settings/components/_vv-dropdown-action.scss

@@ -1,3 +1,2 @@
-$dark-vv-dropdown-action: (
-	color: var(--color-brand-lighten-3),
-);
+// Its text colors are the readable roles, which the dark theme redeclares
+$dark-vv-dropdown-action: ();

package/src/themes/dark/settings/components/_vv-dropdown-option.scss

@@ -1,19 +1,2 @@
-$dark-vv-dropdown-option: (
-	state: (
-		focus-visible: (
-			color: var(--color-success-lighten-3),
-		),
-		selected: (
-			color: var(--color-brand-lighten-3),
-		),
-	),
-	modifier: (
-		unselectable: (
-			state: (
-				focus-visible: (
-					color: var(--color-danger-lighten-5),
-				),
-			),
-		),
-	),
-);
+// Its text colors are the readable roles, which the dark theme redeclares
+$dark-vv-dropdown-option: ();

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

@@ -1,15 +1,2 @@
-$dark-vv-nav: (
-	modifier: (
-		tabs: (
-			element: (
-				item-label: (
-					state: (
-						current: (
-							color: var(--color-brand-lighten-3),
-						),
-					),
-				),
-			),
-		),
-	),
-);
+// Its text colors are the readable roles, which the dark theme redeclares
+$dark-vv-nav: ();

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

@@ -0,0 +1,7 @@
+@use 'choice' as *;
+
+$dark-vv-radio: (
+	modifier: (
+		segment: $dark-choice-segment,
+	),
+);