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.

Sign up for GitHub

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

Jump to bottom

Dialogs have unreadable colour of links in dark mode #14084

Closed
krassowski opened this issue Feb 25, 2023 · 3 comments · Fixed by #14159
Closed

Dialogs have unreadable colour of links in dark mode #14084

krassowski opened this issue Feb 25, 2023 · 3 comments · Fixed by #14159
Labels
bug good first issue tag:Accessibility tag:CSS For general CSS related issues and pecadilloes
Milestone
4.0.0

Comments

@krassowski
Copy link
Member

Description

  1. This link is unreadable for me:

Screenshot from 2023-02-25 18-53-46

  1. This link is funny on hover:

Screenshot from 2023-02-25 18-58-11

Relevant code parts were touched in #11827

The problem here is that .jp-Dialog-content a:hover has higher precedence.

Reproduce

  1. Open command palette in a notebook
  2. Select "trust notebook"
  3. See the unreadable link in popup

for the other one go to Help menu → About

Expected behavior

  1. The links in dialog are readable in dark mode and use var(--jp-content-link-color) by default
  2. The flat orange button white colour on :hover

Context

  • JupyterLab version: 4.0.0a30
@krassowski krassowski added bug good first issue status:Needs Triage Applied to new issues that need triage labels Feb 25, 2023
@krassowski krassowski added this to the 4.0.0 milestone Feb 25, 2023
@krassowski krassowski mentioned this issue Feb 25, 2023
Closed
@AdityaGirdhar
Copy link

@krassowski Hi! I have a university break starting from next week and I'd love to contribute. When can I get started, and what exactly do I have to do?

@krassowski
Copy link
Member Author

@AdityaGirdhar no need to ask for permission - feel free to start right away (we do not assign "good first issues") - please just read our contributing documentation and open a draft PR when ready.

@JasonWeill JasonWeill added tag:Accessibility tag:CSS For general CSS related issues and pecadilloes and removed status:Needs Triage Applied to new issues that need triage labels Feb 27, 2023
@JasonWeill JasonWeill mentioned this issue Mar 2, 2023
Closed
This was referenced Mar 5, 2023
Closed
Merged
@JasonWeill
Copy link
Contributor

Even in light mode, the red background of links on hover is very jarring and low contrast:

image

@JasonWeill JasonWeill linked a pull request Mar 20, 2023 that will close this issue
Fix link colors #14084 (Previous PR #14129) #14159
Merged
JasonWeill pushed a commit that referenced this issue Mar 27, 2023
@damiend97 @krassowski
Fix link colors #14084 (Previous PR #14129) (#14159)
fa9981d 
* Fix button color on About JupyterLab

* Fix text color on documentation link

* Update .jp-Button-flat styling

Remove color property (should be defined in packages > help-extension > style > base.css)
Remove on hover property changes
Remove on focus background color change

* Update .jp-Button-flat styling

Modified styling to conditionally output color based on theme
Displays #FF9800 (orange) in dark mode
Displays #0D4781 (blue) in light mode
Ensured colors pass WebAIM contrast guidelines

* Remove hover color change on dialog content links

* Adjust content link color

This fixes the color contrast for .jp-Dialog-content a, as well as any other elements using jp-content-link-color in light theme

* Simplify CSS selectors for performance

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

* Simplify CSS selectors for performance

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>

* Update .jp-Button-flat styling

Removed dark theme conditional styling
Changed color var to content-link-color to achieve consistent blue links

---------

Co-authored-by: Michał Krassowski <5832902+krassowski@users.noreply.github.com>
@krassowski krassowski mentioned this issue May 31, 2023
Open
16 tasks
@github-actions github-actions bot locked as resolved and limited conversation to collaborators Mar 27, 2024
Sign up for free to subscribe to this conversation on GitHub. Already have an account? Sign in.
Assignees
No one assigned
Labels
bug good first issue tag:Accessibility tag:CSS For general CSS related issues and pecadilloes
Projects
None yet
Milestone
4.0.0
Development

Successfully merging a pull request may close this issue.

Fix link colors #14084 (Previous PR #14129) damiend97/jupyterlab
3 participants
@krassowski @AdityaGirdhar @JasonWeill