From 2e46f3b9c6611f5d0e7d8b5e8417577ddb76245c Mon Sep 17 00:00:00 2001 From: Cursor Agent Date: Fri, 10 Jul 2026 02:23:39 +0000 Subject: [PATCH] Unify badge/button colors to one primary hue per theme Email, LinkedIn, and the homepage Medium badge no longer clash with mismatched blue/orange colors on the same page - they now all share the same theme-adaptive --btn-primary-* tokens already used by .gradient-btn (blue in light mode, orange in dark/Xanga). Also fixes the 'Read on Medium' / 'Continue reading on Medium' buttons on blog posts, which were previously locked to orange and looked out of place next to the blue primary buttons in light theme. Adds the necessary Xanga-mode CSS overrides (link color/background and card-styling exclusion) for the new bg-btn-primary utility. Co-authored-by: Thomas Bohn --- app/blog/[slug]/page.tsx | 4 ++-- app/contact/page.tsx | 11 +++++++---- app/globals.css | 25 +++++++++++++++++++++++-- app/page.tsx | 2 +- tailwind.config.ts | 9 +++++++++ 5 files changed, 42 insertions(+), 9 deletions(-) diff --git a/app/blog/[slug]/page.tsx b/app/blog/[slug]/page.tsx index d66d880..5b4373a 100644 --- a/app/blog/[slug]/page.tsx +++ b/app/blog/[slug]/page.tsx @@ -53,7 +53,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str href={post.mediumUrl} target="_blank" rel="noopener noreferrer" - className="inline-flex items-center gap-2 px-4 py-2 bg-accent-orange text-on-accent-orange rounded-lg hover:bg-accent-orange-hover transition-colors text-sm font-semibold" + className="inline-flex items-center gap-2 px-4 py-2 bg-btn-primary text-btn-primary-text rounded-lg hover:bg-btn-primary-hover transition-colors text-sm font-semibold" > Read on Medium @@ -103,7 +103,7 @@ export default async function BlogPost({ params }: { params: Promise<{ slug: str href={post.mediumUrl} target="_blank" rel="noopener noreferrer" - className="inline-flex items-center gap-2 px-6 py-3 bg-accent-orange text-on-accent-orange rounded-lg hover:bg-accent-orange-hover transition-colors font-semibold" + className="inline-flex items-center gap-2 px-6 py-3 bg-btn-primary text-btn-primary-text rounded-lg hover:bg-btn-primary-hover transition-colors font-semibold" > Continue reading on Medium diff --git a/app/contact/page.tsx b/app/contact/page.tsx index f433b16..584831f 100644 --- a/app/contact/page.tsx +++ b/app/contact/page.tsx @@ -46,8 +46,8 @@ export default function Contact() {
-
- +
+

Email

@@ -83,8 +83,11 @@ export default function Contact() {
-
- + {/* Shares the same primary tokens as the Email badge above (rather + than a fixed brand-orange) so the two contact channels read as + one consistent color instead of an arbitrary blue/orange pair. */} +
+

LinkedIn

diff --git a/app/globals.css b/app/globals.css index 4f245ce..2b7b7c4 100644 --- a/app/globals.css +++ b/app/globals.css @@ -299,6 +299,27 @@ html[data-theme="xanga"] body a[class*="bg-accent"]:not([class*="hover:bg-accent color: var(--on-accent) !important; } +/* Same fix for the shared "primary" badge/button tokens (bg-btn-primary, + text-btn-primary-text - see tailwind.config.ts) used by things like the + "Read on Medium" buttons so they resolve to the theme's primary hue + instead of being pinned to orange - those are also plain tags, so + they'd otherwise inherit Xanga's blanket link color/hover-box styling. */ +html[data-theme="xanga"] body a[class*="bg-btn-primary"], +html[data-theme="xanga"] body a[class*="bg-btn-primary"]:hover, +html[data-theme="xanga"] body a[class*="bg-btn-primary"]:focus-visible { + color: var(--btn-primary-text) !important; + box-shadow: none !important; +} +html[data-theme="xanga"] body a[class*="bg-btn-primary"] *, +html[data-theme="xanga"] body a[class*="bg-btn-primary"]:hover *, +html[data-theme="xanga"] body a[class*="bg-btn-primary"]:focus-visible * { + color: var(--btn-primary-text) !important; +} +html[data-theme="xanga"] body a[class*="hover:bg-btn-primary-hover"]:hover, +html[data-theme="xanga"] body a[class*="hover:bg-btn-primary-hover"]:focus-visible { + background-color: var(--btn-primary-to) !important; +} + /* Same problem outside the header: several buttons keep a permanent text-accent/text-text-primary/text-text-secondary class for their resting state, then switch their own background to --accent or --accent-orange on @@ -347,8 +368,8 @@ html[data-theme="xanga"] body footer { forces a card-style background/border/padding onto them and, worse, !important-pins their background so hover:bg-accent can never actually show. */ -html[data-theme="xanga"] body [class*="rounded-lg"]:not([class*="bg-accent"]), -html[data-theme="xanga"] body [class*="card"]:not([class*="bg-accent"]), +html[data-theme="xanga"] body [class*="rounded-lg"]:not([class*="bg-accent"]):not([class*="bg-btn-primary"]), +html[data-theme="xanga"] body [class*="card"]:not([class*="bg-accent"]):not([class*="bg-btn-primary"]), html[data-theme="xanga"] body article, html[data-theme="xanga"] body section { background-color: var(--bg-secondary) !important; diff --git a/app/page.tsx b/app/page.tsx index 43ab537..19bf42c 100644 --- a/app/page.tsx +++ b/app/page.tsx @@ -99,7 +99,7 @@ export default function Home() { {/* Medium Card */}
-
+
M

Medium

diff --git a/tailwind.config.ts b/tailwind.config.ts index d74cb06..b547927 100644 --- a/tailwind.config.ts +++ b/tailwind.config.ts @@ -34,6 +34,15 @@ const config: Config = { 'accent-orange-hover': withOpacity('--accent-orange-hover'), 'on-accent': withOpacity('--on-accent'), 'on-accent-orange': withOpacity('--on-accent-orange'), + // Same "one hue per theme" tokens .gradient-btn uses (blue in light, + // orange in dark/xanga - see the --btn-primary-* comment in + // globals.css). Exposed as utilities so brand badges/buttons that + // aren't full .gradient-btn elements (e.g. contact page icon tiles, + // "Read on Medium" buttons) can share the exact same primary color + // instead of being locked to accent-orange and clashing with it. + 'btn-primary': withOpacity('--btn-primary-from'), + 'btn-primary-hover': withOpacity('--btn-primary-to'), + 'btn-primary-text': withOpacity('--btn-primary-text'), 'border': withOpacity('--border'), 'link': withOpacity('--link'), 'link-hover': withOpacity('--link-hover'),