Theme Choices.js to match app dark/light themes

Code review of Task 7 showed Choices.js shipping with white-bg +
light-grey-text defaults, which were unreadable in dark mode and
clashed with the app's premium aesthetic. The design doc section 10
scoped these overrides into the CSS work but they hadn't been written.

Adds ~70 lines to custom.css re-themeing every .choices__ selector to
use existing design tokens (--bg-card, --bg-inset, --text-primary,
--accent, --border-default, etc.). No hardcoded colours; both :root
and :root.light themes work automatically.

Key visual changes:
- Dropdown popup: dark-card background with shadow
- Options: primary text colour, accent hover highlight
- Selected chips: orange accent pill with white text
- Focus ring: 0.15rem accent glow on the input

Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
Konrad du Plessis 2026-04-22 23:23:38 +02:00
parent ea481bfbf4
commit b0d382987b

View File

@ -1522,3 +1522,121 @@ body, .card, .modal-content, .form-control, .form-select,
background: var(--bg-card-hover);
text-decoration: none;
}
/* === Choices.js theme overrides (dark + light, executive report modal) === */
/*
Choices.js ships with a white-bg, light-grey-text default that clashes with
the app's dark theme. These overrides replace those defaults with the app's
own design tokens so the multi-select picker matches every other card and
input on the page. All tokens auto-switch between dark (:root) and light
(:root.light) themes no duplicate blocks needed.
*/
/* Container — the outer wrapper that replaces the native <select> */
.choices {
margin-bottom: 0;
}
/* Closed-state input area (where chips and the placeholder/search sit) */
.choices__inner {
background: var(--bg-inset);
color: var(--text-primary);
border: 1px solid var(--border-default);
border-radius: 0.5rem;
padding: 0.4rem 0.55rem;
min-height: 2.55rem;
font-size: 0.925rem;
}
.choices.is-focused .choices__inner,
.choices.is-open .choices__inner {
border-color: var(--accent);
box-shadow: 0 0 0 0.15rem rgba(232, 133, 26, 0.18);
}
/* The cloned search input typed into when the dropdown is open */
.choices__input {
background: transparent !important;
color: var(--text-primary) !important;
font-size: 0.925rem;
}
.choices__input::placeholder {
color: var(--text-tertiary);
}
/* Dropdown popup — the list of choices */
.choices__list--dropdown,
.choices__list[aria-expanded] {
background: var(--bg-card);
border: 1px solid var(--border-default);
border-radius: 0.5rem;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.28);
margin-top: 4px;
z-index: 2000;
}
/* Individual option rows in the dropdown */
.choices__list--dropdown .choices__item,
.choices__list[aria-expanded] .choices__item {
color: var(--text-primary);
padding: 0.5rem 0.75rem;
font-size: 0.9rem;
}
/* Hovered / keyboard-highlighted option */
.choices__list--dropdown .choices__item--selectable.is-highlighted,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted {
background: var(--bg-card-hover);
color: var(--text-primary);
}
/* The trailing "Press to select" hint */
.choices__list--dropdown .choices__item--selectable.is-highlighted::after,
.choices__list[aria-expanded] .choices__item--selectable.is-highlighted::after {
color: var(--accent);
opacity: 0.9;
}
/* Disabled / placeholder-style rows (e.g. "No matches found") */
.choices__list--dropdown .choices__item--disabled,
.choices__list[aria-expanded] .choices__item--disabled {
color: var(--text-tertiary);
}
/* Placeholder text in the input area when nothing is selected */
.choices__placeholder {
color: var(--text-tertiary);
opacity: 1;
}
/* Selected chips in multi-select mode (visible when items are chosen) */
.choices__list--multiple .choices__item {
background: var(--accent);
border: 1px solid var(--accent);
color: #fff;
font-size: 0.82rem;
font-weight: 500;
padding: 0.2rem 0.6rem;
margin: 0.15rem 0.25rem 0.15rem 0;
border-radius: 999px;
}
.choices__list--multiple .choices__item.is-highlighted {
background: var(--accent-hover);
border-color: var(--accent-hover);
}
/* The × button on each selected chip */
.choices__list--multiple .choices__button {
border-left: 1px solid rgba(255, 255, 255, 0.4);
margin: 0 0 0 0.5rem;
padding-left: 0.5rem;
opacity: 0.85;
}
.choices__list--multiple .choices__button:hover {
opacity: 1;
}
/* No-results / no-choices message */
.choices__list .choices__item--no-results,
.choices__list .choices__item--no-choices {
color: var(--text-tertiary);
font-style: italic;
}