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

Style update: Adjust colors on error state of inputs in Dark Mode #1423

Open
orion-cengage opened this issue Sep 11, 2024 · 0 comments
Open
Labels
feature request Functionality that you believe is missing that you want added react-magma-dom Tasks related to react-magma-dom styles/theme Issues related to styling and/or theming

Comments

@orion-cengage
Copy link
Contributor

orion-cengage commented Sep 11, 2024

Purpose: The color of red we're using in the error state of all inputs in dark mode is very pale and hard to quickly identify even for those who have no difficulty viewing colors. We just need to change the shades of red we're using slightly.

Figma: https://www.figma.com/design/Tr95MXTnqB7usxQz1aPKHL/Components---Feedback?m=auto&node-id=825-13558&t=HV7asUcgNyHVObLM-1

image

  1. Change color of border from danger-200 to danger-300
  2. Change icon color from danger-200 to danger 300
  3. Keep the text of the error at danger-200 in order to maintain the necessary contrast ratio needed for a11y.
  4. Components impacted:
  • Text field
  • Text area
  • Time
  • Number
  • Password
  • Date picker
  • Select
  • Native select
  • File upload (Dropzone)
  • Radio button
  • Checkboxes
@orion-cengage orion-cengage added react-magma-dom Tasks related to react-magma-dom styles/theme Issues related to styling and/or theming feature request Functionality that you believe is missing that you want added labels Sep 11, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
feature request Functionality that you believe is missing that you want added react-magma-dom Tasks related to react-magma-dom styles/theme Issues related to styling and/or theming
Projects
Status: To Do
Development

No branches or pull requests

1 participant