Normalize theme tokens: accent-text, zap-text, remove hard-coded colors

- Add accent-text and zap-text tokens to all 7 themes for proper contrast on accent/zap-colored buttons (fixes white-on-light-accent in Catppuccin, Nord Frost, Hackerman, Sepia, Gruvbox) - Replace text-white → text-accent-text on all accent buttons (20+ instances) - Replace text-white → text-zap-text on zap buttons - Replace hover:text-white → hover:text-accent-text on follow/action buttons - Replace bg-blue-500 → bg-accent in FountainCard (theme-aware) - Remaining text-white is correct: overlays on bg-black, danger badges
2026-05-07 12:49:13 -07:00 · 2026-04-02 17:33:59 +02:00
parent 1fd613425d
commit 1006b1a1f0
21 changed files with 47 additions and 29 deletions
--- a/src/components/article/ArticleEditor.tsx
+++ b/src/components/article/ArticleEditor.tsx
@@ -328,7 +328,7 @@ export function ArticleEditor() {
          <button
            onClick={handlePublish}
            disabled={!canPublish || publishing || published}
-            className="px-4 py-1 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+            className="px-4 py-1 text-[11px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
          >
            {published ? "published ✓" : publishing ? "publishing…" : "publish"}
          </button>
@@ -493,7 +493,7 @@ function DraftListView({ onNewDraft }: { onNewDraft: () => void }) {
        </div>
        <button
          onClick={onNewDraft}
-          className="px-3 py-1 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors"
+          className="px-3 py-1 text-[11px] bg-accent hover:bg-accent-hover text-accent-text transition-colors"
        >
          new draft
        </button>
--- a/src/components/article/ArticleFeed.tsx
+++ b/src/components/article/ArticleFeed.tsx
@@ -68,7 +68,7 @@ export function ArticleFeed() {
        <h1 className="text-text text-sm font-medium">Articles</h1>
        <button
          onClick={() => setView("article-editor")}
-          className="text-[11px] px-3 py-1 border border-accent/60 text-accent hover:bg-accent hover:text-white transition-colors"
+          className="text-[11px] px-3 py-1 border border-accent/60 text-accent hover:bg-accent hover:text-accent-text transition-colors"
        >
          write article
        </button>
--- a/src/components/article/ArticleView.tsx
+++ b/src/components/article/ArticleView.tsx
@@ -456,7 +456,7 @@ export function ArticleView() {
                  {loggedIn && (
                    <button
                      onClick={() => setShowZap(true)}
-                      className="text-[11px] px-4 py-1.5 bg-zap hover:bg-zap/90 text-white transition-colors"
+                      className="text-[11px] px-4 py-1.5 bg-zap hover:bg-zap/90 text-zap-text transition-colors"
                    >
                      ⚡ Zap {authorName}
                    </button>
--- a/src/components/dm/DMView.tsx
+++ b/src/components/dm/DMView.tsx
@@ -220,7 +220,7 @@ function ThreadPanel({
          <button
            onClick={handleSend}
            disabled={!text.trim() || sending}
-            className="px-3 self-end py-2 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0"
+            className="px-3 self-end py-2 text-[11px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed shrink-0"
          >
            {sending ? "…" : "send"}
          </button>
--- a/src/components/feed/ComposeBox.tsx
+++ b/src/components/feed/ComposeBox.tsx
@@ -313,7 +313,7 @@ export function ComposeBox({ onPublished, onNoteInjected }: { onPublished?: () =
              <button
                onClick={handlePublish}
                disabled={!canPost}
-                className="px-3 py-1 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                className="px-3 py-1 text-[11px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
              >
                {publishing ? "posting…" : "post"}
              </button>
--- a/src/components/feed/FountainCard.tsx
+++ b/src/components/feed/FountainCard.tsx
@@ -27,8 +27,8 @@ export function FountainCard({ seg }: { seg: ContentSegment }) {
        rel="noopener noreferrer"
        className="mt-2 flex items-center gap-3 rounded-sm bg-bg-raised border border-border p-3 hover:bg-bg-hover transition-colors cursor-pointer"
      >
-        <div className="w-10 h-10 rounded-full bg-blue-500/20 flex items-center justify-center shrink-0">
-          <span className="text-blue-400 text-lg font-bold">F</span>
+        <div className="w-10 h-10 rounded-full bg-accent/20 flex items-center justify-center shrink-0">
+          <span className="text-accent text-lg font-bold">F</span>
        </div>
        <div className="min-w-0">
          <div className="text-[11px] text-text-muted">Fountain.fm</div>
@@ -74,8 +74,8 @@ export function FountainCard({ seg }: { seg: ContentSegment }) {
          onError={(e) => { (e.target as HTMLImageElement).style.display = "none"; }}
        />
      ) : (
-        <div className="w-12 h-12 rounded-sm bg-blue-500/20 flex items-center justify-center shrink-0">
-          <span className="text-blue-400 text-lg font-bold">F</span>
+        <div className="w-12 h-12 rounded-sm bg-accent/20 flex items-center justify-center shrink-0">
+          <span className="text-accent text-lg font-bold">F</span>
        </div>
      )}
      <div className="min-w-0 flex-1">
--- a/src/components/feed/InlineReplyBox.tsx
+++ b/src/components/feed/InlineReplyBox.tsx
@@ -228,7 +228,7 @@ export function InlineReplyBox({ event, name, rootEvent }: InlineReplyBoxProps)
        <button
          onClick={handleReplySubmit}
          disabled={(!replyText.trim() && attachments.length === 0) || replying || uploading}
-          className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        >
          {replySent ? "replied ✓" : replying ? "posting…" : "reply"}
        </button>
--- a/src/components/feed/QuoteModal.tsx
+++ b/src/components/feed/QuoteModal.tsx
@@ -93,7 +93,7 @@ export function QuoteModal({ event, authorName, authorAvatar, onClose, onPublish
            <button
              onClick={handlePublish}
              disabled={!canPublish}
-              className="px-4 py-1.5 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="px-4 py-1.5 text-[11px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
            >
              {publishing ? "posting…" : "quote & post"}
            </button>
--- a/src/components/follows/FollowsView.tsx
+++ b/src/components/follows/FollowsView.tsx
@@ -74,7 +74,7 @@ function FollowRow({
          className={`shrink-0 px-3 py-1 text-[11px] transition-colors ${
            isFollowing
              ? "text-text-dim border border-border hover:text-danger hover:border-danger"
-              : "bg-accent hover:bg-accent-hover text-white"
+              : "bg-accent hover:bg-accent-hover text-accent-text"
          }`}
        >
          {isFollowing ? "unfollow" : "follow"}
--- a/src/components/onboarding/OnboardingFlow.tsx
+++ b/src/components/onboarding/OnboardingFlow.tsx
@@ -47,7 +47,7 @@ function WelcomeStep({ onCreateNew, onHaveKey }: { onCreateNew: () => void; onHa
      <div className="space-y-3">
        <button
          onClick={onCreateNew}
-          className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-white transition-colors"
+          className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-accent-text transition-colors"
        >
          Create a new identity
        </button>
@@ -101,7 +101,7 @@ function CreateStep({ onNext }: { onNext: (signer: NDKPrivateKeySigner) => void

      <button
        onClick={() => onNext(signer)}
-        className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-white transition-colors"
+        className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-accent-text transition-colors"
      >
        Next: back up your secret key →
      </button>
@@ -185,7 +185,7 @@ function BackupStep({ signer, onComplete }: { signer: NDKPrivateKeySigner; onCom
      <button
        onClick={handleStart}
        disabled={!confirmed || saving}
-        className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+        className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
      >
        {saving ? "Setting up…" : "Start using Vega"}
      </button>
@@ -267,7 +267,7 @@ function LoginStep({ onBack, onComplete }: { onBack: () => void; onComplete: ()
        <button
          onClick={handleLogin}
          disabled={!value.trim() || loading}
-          className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="w-full py-2.5 text-[13px] font-medium bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        >
          {loading ? (mode === "bunker" ? "Connecting…" : "Logging in…") : "Log in"}
        </button>
--- a/src/components/profile/EditProfileForm.tsx
+++ b/src/components/profile/EditProfileForm.tsx
@@ -87,7 +87,7 @@ export function EditProfileForm({ pubkey, onSaved }: { pubkey: string; onSaved:
        <button
          onClick={handleSave}
          disabled={saving || saved}
-          className="px-4 py-1.5 text-[11px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="px-4 py-1.5 text-[11px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        >
          {saved ? "saved ✓" : saving ? "saving…" : "save profile"}
        </button>
--- a/src/components/profile/ProfileView.tsx
+++ b/src/components/profile/ProfileView.tsx
@@ -176,7 +176,7 @@ export function ProfileView() {
              className={`text-[11px] px-3 py-1 border transition-colors disabled:opacity-40 disabled:cursor-not-allowed ${
                isFollowing
                  ? "border-border text-text-muted hover:text-danger hover:border-danger/40"
-                  : "border-accent/60 text-accent hover:bg-accent hover:text-white"
+                  : "border-accent/60 text-accent hover:bg-accent hover:text-accent-text"
              }`}
            >
              {followPending ? "…" : isFollowing ? "unfollow" : "follow"}
--- a/src/components/search/SearchView.tsx
+++ b/src/components/search/SearchView.tsx
@@ -74,7 +74,7 @@ function UserRow({ user }: { user: ParsedUser }) {
          className={`text-[11px] px-3 py-1 border transition-colors shrink-0 disabled:opacity-40 disabled:cursor-not-allowed ${
            isFollowing
              ? "border-border text-text-muted hover:text-danger hover:border-danger/40"
-              : "border-accent/60 text-accent hover:bg-accent hover:text-white"
+              : "border-accent/60 text-accent hover:bg-accent hover:text-accent-text"
          }`}
        >
          {pending ? "…" : isFollowing ? "unfollow" : "follow"}
@@ -114,7 +114,7 @@ function SuggestionFollowButton({ pubkey }: { pubkey: string }) {
      className={`text-[11px] px-3 py-1 border transition-colors shrink-0 disabled:opacity-40 disabled:cursor-not-allowed ${
        isFollowing
          ? "border-border text-text-muted hover:text-danger hover:border-danger/40"
-          : "border-accent/60 text-accent hover:bg-accent hover:text-white"
+          : "border-accent/60 text-accent hover:bg-accent hover:text-accent-text"
      }`}
    >
      {pending ? "..." : isFollowing ? "unfollow" : "follow"}
--- a/src/components/shared/AboutView.tsx
+++ b/src/components/shared/AboutView.tsx
@@ -65,7 +65,7 @@ export function AboutView() {
          </p>
          <button
            onClick={() => setShowZap(true)}
-            className="px-4 py-2 text-[12px] font-medium bg-zap hover:bg-zap/90 text-white transition-colors"
+            className="px-4 py-2 text-[12px] font-medium bg-zap hover:bg-zap/90 text-zap-text transition-colors"
          >
            ⚡ Zap hoornet
          </button>
--- a/src/components/shared/LoginModal.tsx
+++ b/src/components/shared/LoginModal.tsx
@@ -69,7 +69,7 @@ function NewAccountTab({ onClose }: { onClose: () => void }) {
      <button
        onClick={handleConfirm}
        disabled={!confirmed || logging}
-        className="w-full px-4 py-2 text-[12px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+        className="w-full px-4 py-2 text-[12px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
      >
        {logging ? "logging in…" : "create account"}
      </button>
@@ -197,7 +197,7 @@ export function LoginModal({ onClose }: LoginModalProps) {
              <button
                onClick={handleLogin}
                disabled={!input.trim() || loading}
-                className="w-full mt-3 px-4 py-2 text-[12px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                className="w-full mt-3 px-4 py-2 text-[12px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
              >
                {loading
                  ? (tab === "bunker" ? "Connecting…" : "Logging in…")
--- a/src/components/shared/NWCWizard.tsx
+++ b/src/components/shared/NWCWizard.tsx
@@ -146,7 +146,7 @@ function WalletCard({ wallet, onSelect }: { wallet: WalletDef; onSelect: () => v
        )}
        <button
          onClick={onSelect}
-          className="text-[10px] px-2 py-1 border border-accent/60 text-accent hover:bg-accent hover:text-white transition-colors"
+          className="text-[10px] px-2 py-1 border border-accent/60 text-accent hover:bg-accent hover:text-accent-text transition-colors"
        >
          connect →
        </button>
--- a/src/components/thread/ThreadNode.tsx
+++ b/src/components/thread/ThreadNode.tsx
@@ -99,7 +99,7 @@ function InlineThreadReply({ replyTo, rootEvent, onPublished }: {
        <button
          onClick={handleSubmit}
          disabled={!text.trim() || replying}
-          className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+          className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
        >
          {sent ? "replied ✓" : replying ? "posting..." : "reply"}
        </button>
--- a/src/components/thread/ThreadView.tsx
+++ b/src/components/thread/ThreadView.tsx
@@ -248,7 +248,7 @@ export function ThreadView() {
                  <button
                    onClick={handleRootReply}
                    disabled={!replyText.trim() || replying}
-                    className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+                    className="px-2 py-0.5 text-[10px] bg-accent hover:bg-accent-hover text-accent-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
                  >
                    {replySent ? "replied ✓" : replying ? "posting..." : "reply"}
                  </button>
--- a/src/components/zap/ZapModal.tsx
+++ b/src/components/zap/ZapModal.tsx
@@ -68,7 +68,7 @@ export function ZapModal({ target, recipientName, onClose }: ZapModalProps) {
            </p>
            <button
              onClick={() => { onClose(); setView("settings"); }}
-              className="px-4 py-1.5 text-[11px] border border-accent/60 text-accent hover:bg-accent hover:text-white transition-colors"
+              className="px-4 py-1.5 text-[11px] border border-accent/60 text-accent hover:bg-accent hover:text-accent-text transition-colors"
            >
              go to settings →
            </button>
@@ -123,7 +123,7 @@ export function ZapModal({ target, recipientName, onClose }: ZapModalProps) {
            <button
              onClick={handleZap}
              disabled={effectiveAmount <= 0}
-              className="w-full py-2 text-[12px] font-medium bg-zap hover:bg-zap/90 text-white transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
+              className="w-full py-2 text-[12px] font-medium bg-zap hover:bg-zap/90 text-zap-text transition-colors disabled:opacity-30 disabled:cursor-not-allowed"
            >
              ⚡ Zap {effectiveAmount > 0 ? `${effectiveAmount} sats` : ""}
            </button>
--- a/src/index.css
+++ b/src/index.css
@@ -11,7 +11,9 @@
  --color-text-dim: #555555;
  --color-accent: #8b5cf6;
  --color-accent-hover: #7c3aed;
+  --color-accent-text: #ffffff;
  --color-zap: #f59e0b;
+  --color-zap-text: #000000;
  --color-danger: #ef4444;
  --color-warning: #f59e0b;
  --color-success: #22c55e;
--- a/src/lib/themes.ts
+++ b/src/lib/themes.ts
@@ -9,7 +9,9 @@ interface ThemeColors {
  "text-dim": string;
  accent: string;
  "accent-hover": string;
+  "accent-text": string;
  zap: string;
+  "zap-text": string;
  danger: string;
  warning: string;
  success: string;
@@ -36,7 +38,9 @@ export const themes: Theme[] = [
      "text-dim": "#555555",
      accent: "#8b5cf6",
      "accent-hover": "#7c3aed",
+      "accent-text": "#ffffff",
      zap: "#f59e0b",
+      "zap-text": "#000000",
      danger: "#ef4444",
      warning: "#f59e0b",
      success: "#22c55e",
@@ -56,7 +60,9 @@ export const themes: Theme[] = [
      "text-dim": "#9ca3af",
      accent: "#7c3aed",
      "accent-hover": "#6d28d9",
+      "accent-text": "#ffffff",
      zap: "#d97706",
+      "zap-text": "#ffffff",
      danger: "#dc2626",
      warning: "#d97706",
      success: "#16a34a",
@@ -76,7 +82,9 @@ export const themes: Theme[] = [
      "text-dim": "#6c7086",
      accent: "#cba6f7",
      "accent-hover": "#b4befe",
+      "accent-text": "#1e1e2e",
      zap: "#f9e2af",
+      "zap-text": "#1e1e2e",
      danger: "#f38ba8",
      warning: "#f9e2af",
      success: "#a6e3a1",
@@ -96,7 +104,9 @@ export const themes: Theme[] = [
      "text-dim": "#7a6452",
      accent: "#e09850",
      "accent-hover": "#c47f3a",
+      "accent-text": "#2b2018",
      zap: "#f0c040",
+      "zap-text": "#2b2018",
      danger: "#d45040",
      warning: "#e0a040",
      success: "#7ab860",
@@ -116,7 +126,9 @@ export const themes: Theme[] = [
      "text-dim": "#665c54",
      accent: "#fe8019",
      "accent-hover": "#d65d0e",
+      "accent-text": "#282828",
      zap: "#fabd2f",
+      "zap-text": "#282828",
      danger: "#fb4934",
      warning: "#fabd2f",
      success: "#b8bb26",
@@ -136,7 +148,9 @@ export const themes: Theme[] = [
      "text-dim": "#7b88a1",
      accent: "#88c0d0",
      "accent-hover": "#81a1c1",
+      "accent-text": "#2e3440",
      zap: "#ebcb8b",
+      "zap-text": "#2e3440",
      danger: "#bf616a",
      warning: "#ebcb8b",
      success: "#a3be8c",
@@ -156,7 +170,9 @@ export const themes: Theme[] = [
      "text-dim": "#006b1a",
      accent: "#00ff41",
      "accent-hover": "#33ff66",
+      "accent-text": "#0a0a0a",
      zap: "#ffff00",
+      "zap-text": "#0a0a0a",
      danger: "#ff0000",
      warning: "#ffff00",
      success: "#00ff41",