Dropdown: placeholder and option text colours are inverted

[twjeffery]

Description

In the dropdown, the —Select— placeholder renders in the default text colour (#000000) while the options in the open menu render in the secondary colour (#6f6f6f). The weighting is backwards. The placeholder, which should be de-emphasized, is the darkest text in the component, and the options, which are the content, are the lightest.

Two separate corrections:

Placeholder too dark. Text Input and Text Area both use the lighter placeholder colour. Dropdown and Dropdown Multiselect have the same token, but it points at the default text colour, so an empty field reads as filled. This makes filled and empty fields hard to distinguish when scanning a long form.

Options too light. Dropdown options should use the default text colour. Raised by Bruno Alves and Lori in the support channel.

Location

data/component-design-tokens/ in GovAlta/design-tokens:

text-input-color-text-placeholder           = {input.color.text.placeholder}   ->  #9f9f9f  correct
text-area-color-text-placeholder            = {input.color.text.placeholder}   ->  #9f9f9f  correct
dropdown-color-text-placeholder             = {input.color.text.default}       ->  #000000
dropdown-multiselect-color-text-placeholder = {input.color.text.default}       ->  #000000
dropdown-item-color-text                    = {color.text.secondary}           ->  #6f6f6f

Consumed at Dropdown.svelte:1187 (placeholder) and Dropdown.svelte:1107 (options), and at DropdownMultiselect.svelte:784 (closed state span) and DropdownMultiselect.svelte:808 (filter input).

Expected

dropdown-color-text-placeholder             = {input.color.text.placeholder}
dropdown-multiselect-color-text-placeholder = {input.color.text.placeholder}
dropdown-item-color-text                    = {color.text.default}

Dropdown Multiselect's two placeholder fallbacks should also move from var(--goa-input-color-text-default) to var(--goa-input-color-text-placeholder).

Notes

Hover and selected states need no change. dropdown-item-color-text-hover is already {color.text.default}, and both states carry their own background change (greyscale.100 and interactive.default), so the affordance survives the resting colour matching the hover colour.

The options change applies to Dropdown only. Dropdown Multiselect's options are goa-checkbox elements, so their text is governed by checkbox-color-label ({input.color.text.secondary}, #353535), which is already near black. Matching it exactly would mean repainting every checkbox in the system for a #353535 to #000000 difference, which is not worth it.

Related cleanup, not part of this fix: dropdown-multiselect-item-color-text and dropdown-multiselect-item-color-bg-hover have zero references in the codebase. They look like the tokens that control the multiselect options, and they do not.