Skip to content

Improved the text selection style #1497

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

Merged
merged 1 commit into from
Nov 28, 2024
Merged

Improved the text selection style #1497

Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 8 additions & 0 deletions apps/webapp/app/tailwind.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -13,6 +13,14 @@
@apply bg-background-dimmed text-text-dimmed;
font-feature-settings: "rlig" 1, "calt" 1;
}

/* Text selection styles */
::selection {
@apply bg-text-bright/30 text-text-bright;
}
::-moz-selection {
@apply bg-text-bright/30 text-text-bright;
}
Comment on lines +18 to +23
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

💡 Codebase verification

Selection colors need adjustment for better contrast

Based on the tailwind configuration, the current selection colors may have accessibility issues:

  • text-bright is set to charcoal[200] (#D7D9DD), which is a light gray
  • The background is set to 30% opacity of this same color (bg-text-bright/30)
  • This combination likely doesn't provide sufficient contrast against the dark theme background (charcoal[800] #1A1B1F)

Recommendations:

  • Consider using a higher opacity value for the selection background (e.g., 50% or higher)
  • Or use a different color token with better contrast against both selected text and background, such as lavender[400] (#826DFF) which is already used for text links
🔗 Analysis chain

Verify color contrast for accessibility

Please ensure that the selected text maintains sufficient contrast ratio with the background color (bg-text-bright/30) across both light and dark themes for accessibility compliance.

🏁 Scripts executed

The following scripts were executed for the analysis:

Script:

#!/bin/bash
# Description: Search for theme-specific color definitions that might affect text selection contrast

# Look for color token definitions that might affect text selection
rg -A 5 "text-bright|background" "tailwind.config"

# Check for theme-specific color variations
rg "theme:" -A 10 "tailwind.config"

Length of output: 196

Script:

#!/bin/bash
# Search for tailwind config files in the repository
fd -e js -e ts -e cjs -e mjs "tailwind.config"

# Also check for theme-related configurations in any CSS files
rg -t css "theme|colors?:" -A 5

Length of output: 376

Script:

#!/bin/bash
# Check the actual tailwind config content for color definitions
cat apps/webapp/tailwind.config.js

# Look for any theme-specific styles or color variables in the webapp
rg -t css "theme|--color|color:" apps/webapp/

Length of output: 7064


/* shadcn charts: https://ui.shadcn.com/docs/components/chart#add-a-grid */
:root {
Expand Down