Skip to content

fix(#4198): correct dropdown placeholder and option text colours - #171

Merged
ArakTaiRoth merged 1 commit into
mainfrom
tom/4198-dropdown-text-colours
Aug 6, 2026
Merged

fix(#4198): correct dropdown placeholder and option text colours#171
ArakTaiRoth merged 1 commit into
mainfrom
tom/4198-dropdown-text-colours

Conversation

@twjeffery

@twjeffery twjeffery commented Aug 5, 2026

Copy link
Copy Markdown
Collaborator

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.

image image

Three values in data/component-design-tokens/:

token was now
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.css and dist/tokens.scss are regenerated with node index.js. dist/dark-theme.css is unchanged.

Both placeholder tokens now match text-input-color-text-placeholder and text-area-color-text-placeholder, which already point at the placeholder colour. dropdown-item-color-text now matches dropdown-item-color-text-hover by 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:

  1. Dark mode inherits the fix with no dark-theme change, because both tokens resolve through greyscale primitives that dark theme already overrides. Placeholder goes #d4d4d4 to #6a6a6a, options #999999 to #d4d4d4.
  2. Hover and selected states are unchanged and still carry their own background change.
  3. Text input and text area are untouched at #9f9f9f.

Multiselect options are deliberately not part of this change. They are goa-checkbox elements, so their text comes from checkbox-color-label at #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-text is left alone and now looks inconsistent beside dropdown-item-color-text. It has zero references in the codebase, as does dropdown-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-v2 moves 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/4198 in both the React and Angular playgrounds. Once this merges and publishes, that PR takes the pin bump and comes out of draft.

@ArakTaiRoth
ArakTaiRoth merged commit 72054de into main Aug 6, 2026
4 checks passed
@ArakTaiRoth
ArakTaiRoth deleted the tom/4198-dropdown-text-colours branch August 6, 2026 00:43
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Dropdown: placeholder and option text colours are inverted

2 participants