fix(#4198): correct dropdown placeholder and option text colours - #171
Merged
Conversation
ArakTaiRoth
approved these changes
Aug 6, 2026
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Fixes the inverted text weighting in both dropdowns. Today the
—Select—placeholder is the darkest text in the component and the options are the lightest, so an empty field reads as filled.Three values in
data/component-design-tokens/:dropdown-color-text-placeholder{input.color.text.default}{input.color.text.placeholder}dropdown-multiselect-color-text-placeholder{input.color.text.default}{input.color.text.placeholder}dropdown-item-color-text{color.text.secondary}{color.text.default}Resolved, that is placeholders from #000000 to #9f9f9f and options from #6f6f6f to #000000.
dist/tokens.cssanddist/tokens.scssare regenerated withnode index.js.dist/dark-theme.cssis unchanged.Both placeholder tokens now match
text-input-color-text-placeholderandtext-area-color-text-placeholder, which already point at the placeholder colour.dropdown-item-color-textnow matchesdropdown-item-color-text-hoverby reference rather than by coincidence of value.Checked against a local preview rendering real V2 components on both built token files side by side, in light and dark mode:
Multiselect options are deliberately not part of this change. They are
goa-checkboxelements, so their text comes fromcheckbox-color-labelat #353535, which is already near black. Matching #000000 exactly would repaint every checkbox in the system for a #353535 to #000000 difference.dropdown-multiselect-item-color-textis left alone and now looks inconsistent besidedropdown-item-color-text. It has zero references in the codebase, as doesdropdown-multiselect-item-color-bg-hover, so changing it does nothing visible. Cleanup candidate, out of scope here.On contrast, the placeholder sits at 2.65:1 in light and 2.80:1 in dark. That is the same value text input and text area already use. The placeholder is not the accessible name, a visible form label carries that, and the options half of this change raises option text from 5.02:1 to 21:1.
Merging this publishes, so the merge is the release. Nothing reaches consuming teams until the ui-components pin at
@abgov/design-tokens-v2moves off 2.12.0.That follow through is already staged in GovAlta/ui-components#4199, currently in draft. It carries the two Dropdown Multiselect placeholder fallbacks and playground pages at
bugs/4198in both the React and Angular playgrounds. Once this merges and publishes, that PR takes the pin bump and comes out of draft.