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

Fix contrast issues for keyboard shortcut 'Add' button #17074

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

Fix contrast issues for keyboard shortcut 'Add' button #17074

wants to merge 1 commit into from

Conversation

bsul24
Copy link

@bsul24 bsul24 commented Dec 11, 2024

References

#16801

Code changes

The following changes were made in packages/shortcuts-extension/style/base.css to improve the accessibility and contrast of elements in the dark theme:

  • Updated .jp-Shortcuts-Plus background and border-color.
  • Adjusted hover and active states background of .jp-Shortcuts-Plus.
  • Modified the .jp-mod-selected-InputText background color.

These updates ensure better visibility and compliance with WCAG AA contrast standards.

User-facing changes

Users will notice:

  • Improved visibility for the "Add" button in the keyboard shortcuts UI and selected shortcuts that already exist while in dark theme.

Before

image
image

After

Normal
image
Hover
image
image

Backwards-incompatible changes

None

@jupyterlab-probot jupyterlab-probot
Copy link

Thanks for making a pull request to jupyterlab!
To try out this branch on binder, follow this link: Binder

@github-actions github-actions bot added pkg:shortcuts tag:CSS For general CSS related issues and pecadilloes Design System CSS labels Dec 11, 2024
@krassowski krassowski added the bug label Dec 11, 2024
@krassowski
Copy link
Member

This looks very nice in the dark theme (thank you!). How does it look in the light theme?

We would ideally use CSS variables to limit color palette and make it easy to develop third-party themes.

I would suggest (in order of preference):

  • find best matching CSS variables among the existing ones, ideally with appropriate semantic meaning (e.g. --jp-accept-color-normal) that match your intended colors in dark theme as close as possible,
  • if these variables do not work great in light mode, let's define new variable like --jp-shortcuts-accept-color-normal scoped to the shortcuts component and add an override in the dark theme only.

@krassowski krassowski linked an issue Dec 11, 2024 that may be closed by this pull request
In dark theme the "Add" button in keyboard shortcuts UI is not readable #16801
Open
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Reviewers
No reviews
Assignees

@bsul24 bsul24

Labels
bug Design System CSS pkg:shortcuts tag:CSS For general CSS related issues and pecadilloes
Projects
None yet
Milestone
No milestone
Development

Successfully merging this pull request may close these issues.

In dark theme the "Add" button in keyboard shortcuts UI is not readable
2 participants
@bsul24 @krassowski