Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

A11y: StopSearchScreen - Calculate background color to improve text contrast #305

Conversation

ksharma-xyz
Copy link
Owner

@ksharma-xyz ksharma-xyz commented Nov 6, 2024

TL;DR

Added color adjustment utilities and improved the SearchStopScreen's gradient background with dynamic light/dark theme support.

What changed?

  • Added brighten and darken color utility functions for adjusting color lightness
  • Updated SearchStopScreen's gradient background to dynamically adjust based on theme
  • Modified StopSearchListItem to accept a text color parameter
  • Switched to ImmutableList for transport mode types
  • Added comprehensive preview variations for different transport modes

How to test?

  1. Navigate to the SearchStopScreen in both light and dark themes
  2. Verify the gradient background adjusts appropriately for each theme
  3. Check that stop search results are displayed with correct text colors
  4. Confirm the gradient transitions smoothly with the surface color
  5. Test with different transport modes to ensure correct color handling

Why make this change?

To improve readability and visual consistency across themes while maintaining proper contrast ratios. The dynamic color adjustments ensure optimal visibility of content regardless of the selected transport mode or theme.

Screenshots

Screenshots

Screenshot 2024-11-06 at 7 49 16 pm Screenshot 2024-11-06 at 7 49 31 pm Screenshot 2024-11-06 at 7 49 39 pm Screenshot 2024-11-06 at 7 49 53 pm Screenshot 2024-11-06 at 7 48 56 pm Screenshot 2024-11-06 at 7 49 06 pm

@ksharma-xyz ksharma-xyz changed the title Update background color for SearchStopScreen, for better readability UI: Reduce theme color gradient opacity Nov 6, 2024
Copy link
Owner Author

ksharma-xyz commented Nov 6, 2024

This stack of pull requests is managed by Graphite. Learn more about stacking.

Join @ksharma-xyz and the rest of your teammates on Graphite Graphite

@ksharma-xyz ksharma-xyz marked this pull request as ready for review November 6, 2024 08:03
@ksharma-xyz ksharma-xyz changed the base branch from 11-06-add_enough_bottom_padding_for_usualridescreen_content to graphite-base/305 November 6, 2024 08:08
@ksharma-xyz ksharma-xyz force-pushed the 11-06-update_background_color_for_searchstopscreen_for_better_readability branch from ea0560e to c92e672 Compare November 6, 2024 08:14
@ksharma-xyz ksharma-xyz changed the base branch from graphite-base/305 to main November 6, 2024 08:15
@ksharma-xyz ksharma-xyz force-pushed the 11-06-update_background_color_for_searchstopscreen_for_better_readability branch from c92e672 to 5431df6 Compare November 6, 2024 08:15
@ksharma-xyz ksharma-xyz added the UI Design System Related changes label Nov 6, 2024
@ksharma-xyz ksharma-xyz force-pushed the 11-06-update_background_color_for_searchstopscreen_for_better_readability branch from 5431df6 to da7825a Compare November 6, 2024 08:54
@ksharma-xyz ksharma-xyz changed the title UI: Reduce theme color gradient opacity UI: Add color adjustment utilities and improve text contrast Nov 6, 2024
@ksharma-xyz ksharma-xyz changed the title UI: Add color adjustment utilities and improve text contrast A11y: StopSearchScreen - Calculate background color to improve text contrast Nov 6, 2024
@ksharma-xyz ksharma-xyz added the A11y Accessibility label Nov 6, 2024
@ksharma-xyz ksharma-xyz enabled auto-merge (squash) November 6, 2024 08:58
@ksharma-xyz ksharma-xyz merged commit 98d72d5 into main Nov 6, 2024
3 checks passed
@ksharma-xyz ksharma-xyz deleted the 11-06-update_background_color_for_searchstopscreen_for_better_readability branch November 6, 2024 09:00
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
A11y Accessibility UI Design System Related changes
Projects
Status: Done
Development

Successfully merging this pull request may close these issues.

1 participant