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:
parent
f7768e95dd
commit
4660fbb0ab
File diff suppressed because one or more lines are too long
|
|
@ -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;
|
||||
|
|
|
|||
|
|
@ -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>
|
||||
|
|
|
|||
Loading…
Reference in New Issue