design: cyan -> rgb(12,96,96) in light theme, #00F0FF stays in dark theme

- globals.css: add --cyan-ai CSS variable (rgb(12,96,96) light / #00F0FF dark)
  + opacity variants --cyan-ai-10/20/30/40/50/80
- Bulk replace all #00F0FF hardcoded Tailwind arbitrary values with
  var(--cyan-ai) / var(--cyan-ai-10) / etc across 55+ TSX/TS files
- Shadow glow colours also updated (suppressed by box-shadow:none in light mode)
- TypeScript: 0 errors
This commit is contained in:
2026-09-20 12:19:23 +05:30
parent 0fab60b710
commit c17785e38a
57 changed files with 491 additions and 473 deletions

View File

@@ -1,4 +1,4 @@
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card"
import { Activity, BrainCircuit, Zap, Server, ShieldCheck } from "lucide-react"
export default function AgentsPage() {
@@ -23,7 +23,7 @@ export default function AgentsPage() {
</CardHeader>
<CardContent>
<div className="text-3xl font-bold flex items-center gap-3">
<div className="size-3 rounded-full bg-[#00F0FF] animate-pulse"></div> Operational
<div className="size-3 rounded-full bg-[var(--cyan-ai)] animate-pulse"></div> Operational
</div>
</CardContent>
</Card>
@@ -51,9 +51,9 @@ export default function AgentsPage() {
<Card key={i} className={`border ${agent.status === 'Healthy' ? 'border-border' : 'border-yellow-500/50 shadow-[0_0_15px_-5px_rgba(234,179,8,0.3)]'} bg-background`}>
<CardHeader className="flex flex-row items-center justify-between pb-2">
<CardTitle className="text-lg font-bold flex items-center gap-2">
<BrainCircuit className="text-[#00F0FF]" size={20} /> {agent.name}
<BrainCircuit className="text-[var(--cyan-ai)]" size={20} /> {agent.name}
</CardTitle>
<div className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${agent.status === 'Healthy' ? 'bg-[#00F0FF]/10 text-[#00F0FF]' : 'bg-yellow-500/10 text-yellow-500 animate-pulse'}`}>
<div className={`px-2.5 py-0.5 rounded-full text-xs font-bold ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]' : 'bg-yellow-500/10 text-yellow-500 animate-pulse'}`}>
{agent.status}
</div>
</CardHeader>
@@ -74,7 +74,7 @@ export default function AgentsPage() {
</div>
<div className="w-full bg-secondary h-1.5 rounded-full mt-6 overflow-hidden">
<div
className={`h-full ${agent.status === 'Healthy' ? 'bg-[#00F0FF]' : 'bg-yellow-500'}`}
className={`h-full ${agent.status === 'Healthy' ? 'bg-[var(--cyan-ai)]' : 'bg-yellow-500'}`}
style={{ width: agent.successRate }}
></div>
</div>