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

Add a high-contrast theme & improvements for the forced-colors mode #5661

Merged
merged 8 commits into from
Nov 4, 2024

Conversation

paulbauriegel
Copy link
Contributor

@paulbauriegel paulbauriegel commented Oct 31, 2024

Add a high-contrast theme & improvements for the forced-colors mode

  • Invisible borders for key items to make them visible in forced colors mode via border: 1px solid var(--bg-opacity-1)
  • Set a button outline of 5px in forced colors to make selections visible via @media (forced-colors: active)
  • add a new high contrast theme to the theme.scss & to the settings menu
  • all new colors in the new high-contrast theme should create enough contrast for WCAG AAA
  • replace some hard coded colors with the colors from the current theme
  • add hexToCssHsl to the Color.ts and resolveCssVariable to the RecordStatus.ts to use theme vars there too

The high contrast theme is currently basically the light theme with stronger colors so that it complies with WCAG AAA
high_contrast_theme

In the forced color mode you can now see certain features that where not visible before:
forced_colors

Forced contrast mode depends on the implementation of the OS & browser therefore the selected labels I cannot just highlight with a background color and I did it with a thick border.

Type of change

  • New feature (non-breaking change which adds functionality)

How Has This Been Tested
Local Build - Firefox Nightly + Chromium

Checklist

  • I added relevant documentation
  • I followed the style guidelines of this project
  • I did a self-review of my code
  • I made corresponding changes to the documentation
  • I confirm My changes generate no new warnings
  • I have added tests that prove my fix is effective or that my feature works
  • I have added relevant notes to the CHANGELOG.md file (See https://keepachangelog.com/)

@paulbauriegel paulbauriegel marked this pull request as ready for review November 1, 2024 07:11
@leiyre
Copy link
Member

leiyre commented Nov 4, 2024

This is fantastic @paulbauriegel ! Thank you very much for your contribution

@leiyre leiyre merged commit 3136085 into argilla-io:develop Nov 4, 2024
3 of 4 checks passed
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants