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 @@
"use client"
"use client"
import { useEffect, useState } from "react"
import { Card, CardContent } from "@/components/ui/card"
@@ -67,14 +67,14 @@ export function CollegePredictorCard() {
const TAB_COLORS: Record<string, string> = {
Reach: "bg-purple-500/10 border-purple-500/20 text-purple-400",
Target: "bg-[#00F0FF]/10 border-[#00F0FF]/20 text-[#00F0FF]",
Target: "bg-[var(--cyan-ai-10)] border-[var(--cyan-ai-20)] text-[var(--cyan-ai)]",
Safety: "bg-green-500/10 border-green-500/20 text-green-400",
}
const INACTIVE = "bg-white/5 border-transparent text-muted-foreground hover:bg-white/10"
return (
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] overflow-hidden group hover:border-[#00F0FF]/30 transition-colors">
<Card className="border-border bg-card shadow-[0_4px_24px_rgba(0,0,0,0.3)] overflow-hidden group hover:border-[var(--cyan-ai-30)] transition-colors">
<CardContent className="p-5 flex flex-col gap-4">
{/* Tabs */}
<div className="flex gap-1.5">
@@ -100,7 +100,7 @@ export function CollegePredictorCard() {
<div className="flex flex-col gap-2">
{colleges.map((col) => (
<div key={col.name} className="flex items-center gap-3 p-3 rounded-xl bg-white/5 border border-border hover:bg-white/10 transition-colors group/item">
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black shrink-0 ${activeTab === "Reach" ? "bg-purple-500/10 text-purple-400" : activeTab === "Target" ? "bg-[#00F0FF]/10 text-[#00F0FF]" : "bg-green-500/10 text-green-400"}`}>
<div className={`w-8 h-8 rounded-full flex items-center justify-center text-xs font-black shrink-0 ${activeTab === "Reach" ? "bg-purple-500/10 text-purple-400" : activeTab === "Target" ? "bg-[var(--cyan-ai-10)] text-[var(--cyan-ai)]" : "bg-green-500/10 text-green-400"}`}>
#{col.rank}
</div>
<div className="flex-1 min-w-0">