No focus marker on the checked checkbox in TV display mode with Dark theme

[dmitrylyzo]

This issue respects the following points:

• This issue is not already reported on GitHub (I've searched it).
• I agree to follow Jellyfin's Code of Conduct.
• This report addresses only a single issue; If you encounter multiple issues, kindly create separate reports for each one.

Describe the bug

Checked emby-checkbox has no focus marker in TV display mode with Dark theme. More precisely, its border-color and background-color have the same value for checked and focus states.

jellyfin-web/src/themes/_base/_theme.scss

Lines 437 to 439 in 17071eb

	.emby-checkbox:focus + span + .checkboxOutline {
	border-color: var(--jf-palette-secondary-main, $secondary-main);
	}

jellyfin-web/src/themes/_base/_theme.scss

Lines 441 to 444 in 17071eb

	.emby-checkbox:checked + span + .checkboxOutline,
	.itemProgressBarForeground {
	background-color: var(--jf-palette-primary-main, $primary-main);
	}

But secondary-main is not set for Dark theme and is equal to primary-main.

Previously, the border of the focused checkbox was white.

jellyfin-web/src/themes/dark/theme.scss

Lines 330 to 332 in 99fea57

	.emby-checkbox:focus + span + .checkboxOutline {
	@include var(border-color, --jf-palette-common-white, $common-white);
	}

jellyfin-web/src/themes/dark/theme.scss

Lines 299 to 301 in ac2d059

	.emby-checkbox:focus + span + .checkboxOutline {
	border-color: #fff;
	}

Reproduction Steps

1. Select Dark theme.
2. Select TV display mode.
3. Save and refresh.
4. Navigate to the checkbox (for example, Settings -> Display > Disable server-provided custom CSS code).
5. Check the checkbox.
6. The border of the checkbox has the same color as its background.

Expected/Actual behaviour

The focused checkbox must be distinguishable from the checked one.

Logs

None

Server version

Unstable (not relevant)

Web version

master (17071eb)

Build version

master (17071eb)

Platform

Ubuntu 22.04

Browser

Firefox 153

Additional information

It looks like all the themes are broken.

Purple Haze has different primary and secondary colors, but it overrides the border-color for checked state.

jellyfin-web/src/themes/purplehaze/theme.scss

Lines 221 to 224 in 17071eb

	.emby-checkbox:checked + span + .checkboxOutline {
	background-color: #030322;
	border: 0.14em solid #48c3c8;
	}