From 9bb27043781cbdc5d2ffa0b098fe57257dbbe538 Mon Sep 17 00:00:00 2001 From: Claude Date: Wed, 14 Jan 2026 17:18:24 +0000 Subject: [PATCH] fix: Replace Plan9 yellow accent with purple, add zap/live theme colors - Replace Plan9's bright yellow accent with purple (good contrast on pale yellow) - Add zap and live colors to theme system (used by ZapReceiptRenderer, StatusBadge) - Make light theme gradient orange darker for better contrast - Update ZapReceiptRenderer to use theme zap color instead of hardcoded yellow-500 - Update StatusBadge to use theme live color instead of hardcoded red-600 - Add CSS variables and Tailwind utilities for zap/live colors --- src/components/live/StatusBadge.tsx | 2 +- src/components/nostr/kinds/ZapReceiptRenderer.tsx | 4 ++-- src/index.css | 8 ++++++++ src/lib/themes/apply.ts | 7 +++++++ src/lib/themes/builtin/dark.ts | 4 ++++ src/lib/themes/builtin/light.ts | 12 ++++++++---- src/lib/themes/builtin/plan9.ts | 14 +++++++++----- src/lib/themes/types.ts | 4 ++++ tailwind.config.js | 3 +++ 9 files changed, 46 insertions(+), 12 deletions(-) diff --git a/src/components/live/StatusBadge.tsx b/src/components/live/StatusBadge.tsx index 2f2fa7a..57c6a86 100644 --- a/src/components/live/StatusBadge.tsx +++ b/src/components/live/StatusBadge.tsx @@ -16,7 +16,7 @@ export function StatusBadge({ const config = { live: { label: "LIVE", - className: "bg-red-600 text-white", + className: "bg-live text-white", icon: Circle, }, planned: { diff --git a/src/components/nostr/kinds/ZapReceiptRenderer.tsx b/src/components/nostr/kinds/ZapReceiptRenderer.tsx index 3a08432..395b655 100644 --- a/src/components/nostr/kinds/ZapReceiptRenderer.tsx +++ b/src/components/nostr/kinds/ZapReceiptRenderer.tsx @@ -66,8 +66,8 @@ export function Kind9735Renderer({ event }: BaseEventProps) {
{/* Zap indicator */}
- - + + {amountInSats.toLocaleString("en", { notation: "compact", })} diff --git a/src/index.css b/src/index.css index bec41fe..fdf2997 100644 --- a/src/index.css +++ b/src/index.css @@ -58,6 +58,10 @@ --warning: 45 93% 47%; --info: 199 89% 48%; + /* Nostr-specific colors */ + --zap: 45 93% 40%; + --live: 0 72% 45%; + /* Syntax highlighting */ --syntax-comment: 215.4 16.3% 46.9%; --syntax-punctuation: 222.2 84% 30%; @@ -115,6 +119,10 @@ --warning: 45 93% 47%; --info: 199 89% 48%; + /* Nostr-specific colors */ + --zap: 45 93% 58%; + --live: 0 72% 51%; + /* Syntax highlighting */ --syntax-comment: 215 20.2% 70%; --syntax-punctuation: 210 40% 70%; diff --git a/src/lib/themes/apply.ts b/src/lib/themes/apply.ts index f08d860..bff8c6f 100644 --- a/src/lib/themes/apply.ts +++ b/src/lib/themes/apply.ts @@ -53,6 +53,10 @@ export function applyTheme(theme: Theme): void { root.style.setProperty("--warning", theme.colors.warning); root.style.setProperty("--info", theme.colors.info); + // Nostr-specific colors + root.style.setProperty("--zap", theme.colors.zap); + root.style.setProperty("--live", theme.colors.live); + // Syntax highlighting root.style.setProperty("--syntax-comment", theme.syntax.comment); root.style.setProperty("--syntax-punctuation", theme.syntax.punctuation); @@ -113,6 +117,9 @@ export function getThemeVariables(): string[] { "--success", "--warning", "--info", + // Nostr-specific + "--zap", + "--live", // Syntax "--syntax-comment", "--syntax-punctuation", diff --git a/src/lib/themes/builtin/dark.ts b/src/lib/themes/builtin/dark.ts index 6a2fa66..324e1ec 100644 --- a/src/lib/themes/builtin/dark.ts +++ b/src/lib/themes/builtin/dark.ts @@ -42,6 +42,10 @@ export const darkTheme: Theme = { success: "142 76% 36%", warning: "45 93% 47%", info: "199 89% 48%", + + // Nostr-specific colors + zap: "45 93% 58%", // Gold/yellow for zaps + live: "0 72% 51%", // Red for live indicator }, syntax: { diff --git a/src/lib/themes/builtin/light.ts b/src/lib/themes/builtin/light.ts index a49a412..8e40c16 100644 --- a/src/lib/themes/builtin/light.ts +++ b/src/lib/themes/builtin/light.ts @@ -42,6 +42,10 @@ export const lightTheme: Theme = { success: "142 70% 30%", warning: "38 92% 40%", info: "199 80% 40%", + + // Nostr-specific colors (darker for light background) + zap: "45 93% 40%", // Darker gold for contrast on light + live: "0 72% 45%", // Dark red for live indicator }, syntax: { @@ -70,9 +74,9 @@ export const lightTheme: Theme = { }, gradient: { - color1: "234 179 8", // yellow-500 (darker for light bg) - color2: "249 115 22", // orange-500 - color3: "147 51 234", // purple-600 - color4: "6 182 212", // cyan-500 + color1: "202 138 4", // yellow-600 (darker for light bg) + color2: "194 65 12", // orange-700 (much darker) + color3: "126 34 206", // purple-700 + color4: "8 145 178", // cyan-600 }, }; diff --git a/src/lib/themes/builtin/plan9.ts b/src/lib/themes/builtin/plan9.ts index b982f11..26c1af9 100644 --- a/src/lib/themes/builtin/plan9.ts +++ b/src/lib/themes/builtin/plan9.ts @@ -7,8 +7,8 @@ import type { Theme } from "../types"; * - Pale yellow/cream backgrounds (#ffffe0) * - Light blue-green window chrome (#eaffea) * - Black text for high contrast - * - Bright yellow selections - * - Dark blue accents + * - Purple accents for good contrast on pale yellow + * - Muted blue interactive elements */ export const plan9Theme: Theme = { id: "plan9", @@ -35,9 +35,9 @@ export const plan9Theme: Theme = { secondary: "120 30% 88%", secondaryForeground: "0 0% 0%", - // Bright yellow accent (Plan9 signature selection color) - accent: "60 100% 50%", - accentForeground: "0 0% 0%", + // Purple accent (good contrast on pale yellow) + accent: "280 60% 45%", + accentForeground: "0 0% 100%", // Muted yellow for subdued elements muted: "60 30% 88%", @@ -56,6 +56,10 @@ export const plan9Theme: Theme = { success: "120 60% 25%", warning: "35 90% 35%", info: "200 70% 35%", + + // Nostr-specific colors (dark for contrast on pale yellow) + zap: "35 90% 35%", // Dark amber/gold for zaps + live: "0 70% 40%", // Dark red for live indicator }, syntax: { diff --git a/src/lib/themes/types.ts b/src/lib/themes/types.ts index 48fc40e..75732e5 100644 --- a/src/lib/themes/types.ts +++ b/src/lib/themes/types.ts @@ -59,6 +59,10 @@ export interface ThemeColors { success: HSLValue; warning: HSLValue; info: HSLValue; + + // Nostr-specific colors + zap: HSLValue; // Lightning zaps (typically yellow/gold) + live: HSLValue; // Live streaming indicator (typically red) } /** Syntax highlighting colors for code blocks */ diff --git a/tailwind.config.js b/tailwind.config.js index df78150..8614cbf 100644 --- a/tailwind.config.js +++ b/tailwind.config.js @@ -69,6 +69,9 @@ export default { success: "hsl(var(--success))", warning: "hsl(var(--warning))", info: "hsl(var(--info))", + // Nostr-specific colors + zap: "hsl(var(--zap))", + live: "hsl(var(--live))", }, }, },