Update atwho dropdown to use design tokens for dark mode

Scott de Jongerequested to merge
sdejonge-atwho-dark-mode-overrides into master

What does this MR do and why?

Remove dark mode override styles, instead move styles to their context and use design tokens to provide values for color modes (light and dark mode).

Update atwho dropdown to use design tokens for dark mode

  • Use Tailwind utility classes for dropdown design tokens
  • Remove redundant border on current list item avatar
  • Update current list item background and color to use design tokens
  • Update strong to use text.color.strong design token

MR acceptance checklist

Please evaluate this MR against the MR acceptance checklist. It helps you analyze changes to reduce risks in quality, performance, reliability, security, and maintainability.

Screenshots or screen recordings

Light Dark
CleanShot_2024-10-11_at_15.58.58 CleanShot_2024-10-11_at_15.58.05

How to set up and validate locally

  1. Create a new Issue https://gdk.test:3443/flightjs/Flight/-/issues/new
  2. Toggle between "Rich text editing" and "Plain text editing" modes
  3. Display content editor selection dropdowns with @, !, / etc.
  4. "Rich text editing" (GlDislosureDropdown) and "Plain text editing" (.atwho) dropdown background, border, and text color should be consistent
  5. Update profile preferences to use dark mode https://gdk.test:3443/-/profile/preferences
  6. Validate changes in dark mode

Merge request reports