fix(ui): Improve dark mode form control contrast

Fixes form check input border contrast in dark mode by using solid grey
instead of translucent border. Updates checked checkbox glyph color to
rich black for better visibility against teal primary background.

Fixes #22879
This commit is contained in:
Martin Hauser 2026-08-06 23:43:14 +02:00 committed by Jeremy Stretch
parent f7768e95dd
commit 4660fbb0ab
3 changed files with 15 additions and 1 deletions

File diff suppressed because one or more lines are too long

View File

@ -18,6 +18,11 @@ $table-cell-padding-y: 0.5rem;
// Ensure active nav-pill has a background color in dark mode
$nav-pills-link-active-bg: rgba(var(--tblr-secondary-rgb), 0.15);
// Tabler borders unchecked form controls with the translucent token, which drops to
// 1.1:1 against the dark-mode control fill. Restate it as a solid grey in dark mode.
$form-check-input-border: var(--tblr-border-width) var(--tblr-border-style)
light-dark(var(--tblr-border-color-translucent), var(--tblr-gray-600));
// Brand colors
$rich-black: #001423;
$rich-black-light: #081B2A;

View File

@ -160,6 +160,15 @@ html[data-bs-theme='dark'] {
--tblr-table-hover-bg: inherit;
--tblr-table-hover-color: inherit;
}
// Tabler bakes a white glyph into the checked data URI, which reads at 1.4:1 against
// the teal dark-mode primary. A data URI is an isolated document, so the color cannot
// come from a custom property and has to be baked in at build time.
.form-check-input:checked[type='checkbox'] {
--tblr-form-check-bg-image: #{escape-svg(
url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' width='16' height='16'><path fill='none' stroke='#{$rich-black}' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M4 8.5l2.5 2.5l5.5 -5.5'/></svg>")
)};
}
}
// Do not apply padding to <code> elements inside a <pre>