fix: Improve How It Works heading and step-card contrast for dark mode - #282
Open
Oberonskii wants to merge 1 commit into
Open
fix: Improve How It Works heading and step-card contrast for dark mode#282Oberonskii wants to merge 1 commit into
Oberonskii wants to merge 1 commit into
Conversation
- Add 'var(--card-text)' color to heading, step titles, and descriptions for WCAG AA contrast compliance in both light and dark themes - Remove 'opacity: 0.8' on step descriptions that reduced legibility - Use 'var(--card-bg)' with proper theme-aware background instead of the barely-visible rgba fallback on step cards Closes Muskankr#276
|
@Oberonskii is attempting to deploy a commit to the a2521729-9889's projects Team on Vercel. A member of the Team first needs to authorize it. |
Owner
|
@Oberonskii , Resolve merge conflicts |
Muskankr
added
enhancement
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
2 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Closes #276
What was changed
Fixed the "How It Works" section text legibility on dark backgrounds:
<h3>) — addedcolor: var(--card-text)so it uses the theme-aware text color instead of inheriting a low-contrast default<h4>) — samevar(--card-text)fix for proper light/dark contrast<p>) — removedopacity: 0.8that dimmed text to 80% opacity, addedvar(--card-text)for full WCAG AA compliant contrast<div>) — usedvar(--card-bg)withcolor: var(--card-text)on the card itself so all text inherits theme-appropriate colorsHow it was tested
tsc --noEmit✓)--card-text(light:#0f172a, dark:#e2e8f0) and card background uses--card-bg(light:#ffffff, dark:rgba(2,6,23,0.6))Verification