fix: resolve button text invisible bug — CSS specificity collision

.mkt-root a { color: inherit } had higher specificity than .mkt-btn-primary
{ color: var(--bg) }, causing all Link-based buttons to inherit body text
color (#0A0A0A in light mode) instead of the intended inverted color.

- Split anchor reset: text-decoration applies to all <a>, color:inherit only
  to non-.mkt-btn anchors via :not(.mkt-btn) selector
- Switch .mkt-btn-primary text color to var(--fg-inv) which is always
  guaranteed to contrast against a var(--fg) background in both themes
  (rgba(255,255,255,0.92) in light, #09090B in dark)
- Fix CSS token violations: nav background, shadows, border-radius, mono font

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
SinachPat
2026-05-04 13:32:12 +01:00
co-authored by Claude Sonnet 4.6
parent 278da04bde
commit ddbb505b23
+3 -2
View File
@@ -131,7 +131,8 @@
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
.mkt-root a { color: inherit; text-decoration: none; }
.mkt-root a { text-decoration: none; }
.mkt-root a:not(.mkt-btn) { color: inherit; }
.mkt-root button { font-family: inherit; cursor: pointer; border: none; background: none; }
.mkt-root img, .mkt-root svg { display: block; max-width: 100%; }
@@ -209,7 +210,7 @@
.mkt-btn-primary {
background: var(--fg);
color: var(--bg);
color: var(--fg-inv);
box-shadow: var(--sh-sm);
}
.mkt-btn-primary:hover { transform: translateY(-1px); box-shadow: var(--sh-md); }