Skip to content

Theme react-select and react-dropdown-tree-select to Tokyo-11 #457

Description

@WilfordGrimley

Follow-up from the 2026-07-25 AAA contrast sweep (PR #456). Owner approved 2026-07-25.

Two third-party components render their own unthemed white/grey defaults, outside our token layer:

  • react-select
  • react-dropdown-tree-select

They are currently allowlisted in the new ContrastAudit regression gate (logged, not silently dropped) — this issue removes them from the allowlist by fixing them.

Likely connected to a standing owner complaint: the "grey sources, too much vertical space" feedback on the source-filter panel. That panel is the dropdown-tree-select, so theming it may resolve both the contrast failure and the visual complaint in one pass. Confirm before assuming.

Requirements:

  • Theme both libraries to Tokyo-11 tokens (both expose styling APIs — react-select has the styles/classNames props; react-dropdown-tree-select is CSS-class based). Route from _theme-tokens.scss rather than hardcoding values.
  • Meet the ratified AAA bar: 7:1 normal text, 4.5:1 large/bold. Cover menu open/closed, hover, selected, focused, and disabled option states.
  • Remove the two allowlist entries from the ContrastAudit gate once passing.
  • Sequenced AFTER PR Fix accordion/card-body contrast and outline-secondary legibility (Tokyo-11 sweep) #456 merges to avoid two frontend branches colliding in styles.scss.

Do not start until #456 has landed.

Metadata

Metadata

Assignees

No one assigned

    Labels

    No labels
    No labels

    Type

    No type

    Projects

    No projects

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions