Conversation
Introduces semantic --on-accent / --on-accent-orange CSS tokens (defined per-theme in globals.css, exposed as Tailwind's text-on-accent / text-on-accent-orange) and uses them everywhere a button/link previously hardcoded text-white on top of an accent-colored background. --accent is a light-ish blue in dark theme and bright orange in Xanga theme, so white text on it only ever had real contrast in light theme (~5.4:1); in dark/Xanga it measured ~2.6-2.8:1, well under the 4.5:1 (text) / 3:1 (large text/icons) WCAG AA thresholds. --accent-orange is bright in every theme, so it always needed dark text, not white. Fixed call sites: mobile nav active/hover links, the 404 'Go Home' link, Back to Top, Share button, 'Back to Blog' link, the skip-to-content link, the Xanga sidebar restore icon, the Xanga sidebar layout/nav applets, the gradient CTA buttons (Get in touch / Request VIP Access), and the Medium 'M' + contact-page email icon badges. Also fixes several Xanga/dark-mode-only CSS overrides that were independently breaking these same buttons by permanently pinning their text or background color with !important, even during :hover/:focus, regardless of the color fix above: - Xanga's blanket header-nav link-color rule only ever matched links inside <nav>, but the mobile nav menu is a sibling of <nav>, not nested inside it - broadened the on-accent override to any bg-accent link. - Xanga's 'card styling' rule matches any element with a rounded-lg/card class, which incidentally included several buttons (Share, Back to Blog) - excluded anything that also carries a bg-accent class. - Xanga's 'keep header stable' bg-bg-secondary !important rule was also catching those same buttons' resting-state class, permanently pinning their background so hover:bg-accent could never visually apply - excluded elements with a hover:bg-accent(-orange) class. - Dark mode's enhanced-contrast override for text-text-secondary had the same pinning problem for the inactive mobile nav links' hover state - added an analogous hover/focus exception. Verified with a scripted contrast checker (WCAG relative-luminance ratio) across light/dark/xanga themes and 9 different buttons/links; all now meet at least the AA large-text/UI threshold (3:1), most well above 4.5:1. Co-authored-by: Thomas Bohn <bohn.tl@gmail.com>
…ault outline Co-authored-by: Thomas Bohn <bohn.tl@gmail.com>
…ark text, blue always gets white text Introduces --accent-blue/--accent-blue-hover/--on-accent-blue tokens that never change with the theme (unlike --accent, which becomes the same bright orange as --accent-orange in Xanga mode). .gradient-btn-blue now uses these instead of --accent, so the 'Request VIP Access' button stays visually blue with white text in every theme, instead of collapsing into the same orange gradient as the 'Get in touch' button in Xanga mode. Co-authored-by: Thomas Bohn <bohn.tl@gmail.com>
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.
Sandbox validated and ready for production
This PR was opened automatically after
sandboxwas validated bythis workflow run.
npm run build): passedbaca00aa9fed674cd66e42f72ab66709817ea74eCommits included in this promotion
Review checklist
This PR requires manual human review and must be merged by a person.
This automation will never merge it.