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:
parent
ea481bfbf4
commit
b0d382987b
@ -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;
|
||||
}
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user