naman_panwar_gnpl/pragativeer-v2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

style: set cyan to rgb(12, 96, 96) for light theme only, keeping dark theme neon cyan and standard lightcyan/darkcyan

Browse Source
This commit is contained in:
ectasy663
2026-09-20 13:23:06 +05:30
parent 3adfc9b0fd
commit 9f6010dfac
3 changed files with 29 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
DESIGN_SYSTEM.md
View File

@@ -82,14 +82,16 @@ All fundamental colors are defined as CSS variables in `src/app/globals.css` and
### 3.2 Domain & Brand Feature Accents
| Accent Name | Hex Code | Light Mode Usage | Dark Mode Usage | Feature Association |
| :--- | :---: | :--- | :--- | :--- |
| **Cyber Cyan** | `#00F0FF` | `text-cyan-800`, `border-cyan-300/60`, `bg-cyan-50` | `text-[#00F0FF]`, `bg-[#00F0FF]/10`, `shadow-[0_0_15px_-5px_#00F0FF]` | AI Coach, Tutor Chat, PrepPilot AI |
| **Neon Lime** | `#D1FF4D` | Subtle green pill badges | `bg-primary`, `text-primary`, `shadow-[0_0_15px_-5px_#D1FF4D]` | Dark mode hero highlights & primary actions |
| **Amber Gold** | `#EAB308` | `text-yellow-700`, `bg-yellow-50`, `border-yellow-300/60` | `text-yellow-400`, `bg-yellow-500/10`, `shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)]` | Pro Tier, CBT Marked for Review questions |
| **Emerald Green** | `#22C55E` | `bg-green-500 text-white` | `bg-green-500 text-white shadow-sm` | CBT Answered questions, Success toasts |
| **Crimson Red** | `#EF4444` | `bg-red-500 text-white`, `text-red-600` | `bg-red-500 text-white`, `text-red-400` | CBT Not Answered, Error banners, Destructive |
| **Flame Orange** | `#F97316` | `text-orange-600 bg-orange-500/10` | `text-orange-500 shadow-[0_0_10px_-2px_rgba(249,115,22,0.5)]` | Daily Study Streaks, Streak Counter |
| Accent Name | Light Mode Value | Dark Mode Value | Light Mode Usage | Dark Mode Usage | Feature Association |
| :--- | :--- | :--- | :--- | :--- | :--- |
| **Cyan (`--cyan`)** | `rgb(12, 96, 96)` (Deep AI Teal) | `#00F0FF` (Cyber Cyan) | `var(--cyan)`, `text-[var(--cyan-ai)]`, `bg-[var(--cyan-ai-10)]` | `var(--cyan)`, `text-[#00F0FF]`, `bg-[#00F0FF]/10` | AI Coach, Tutor Chat, PrepPilot AI |
| **Light Cyan (`--lightcyan`)** | `#E0FFFF` (Unchanged) | `#E0FFFF` (Unchanged) | W3C Standard `lightcyan` | W3C Standard `lightcyan` | Standard CSS compatibility |
| **Dark Cyan (`--darkcyan`)** | `#008B8B` (Unchanged) | `#008B8B` (Unchanged) | W3C Standard `darkcyan` | W3C Standard `darkcyan` | Standard CSS compatibility |
| **Neon Lime** | Subtle green pill badges | `#D1FF4D` | Subtle green pill badges | `bg-primary`, `text-primary`, `shadow-[0_0_15px_-5px_#D1FF4D]` | Dark mode hero highlights & primary actions |
| **Amber Gold** | `#EAB308` | `#EAB308` | `text-yellow-700`, `bg-yellow-50`, `border-yellow-300/60` | `text-yellow-400`, `bg-yellow-500/10`, `shadow-[0_0_12px_-4px_rgba(234,179,8,0.2)]` | Pro Tier, CBT Marked for Review questions |
| **Emerald Green** | `#22C55E` | `#22C55E` | `bg-green-500 text-white` | `bg-green-500 text-white shadow-sm` | CBT Answered questions, Success toasts |
| **Crimson Red** | `#EF4444` | `#EF4444` | `bg-red-500 text-white`, `text-red-600` | `bg-red-500 text-white`, `text-red-400` | CBT Not Answered, Error banners, Destructive |
| **Flame Orange** | `#F97316` | `#F97316` | `text-orange-600 bg-orange-500/10` | `text-orange-500 shadow-[0_0_10px_-2px_rgba(249,115,22,0.5)]` | Daily Study Streaks, Streak Counter |
---

18
src/app/globals.css
View File

@@ -25,6 +25,12 @@
--color-muted: var(--muted);
--color-muted-foreground: var(--muted-foreground);
/* Cyan palette mappings */
--color-cyan: var(--cyan);
--color-cyan-500: var(--cyan);
--color-lightcyan: var(--lightcyan);
--color-darkcyan: var(--darkcyan);
--radius-xl: 0.75rem;
--radius-2xl: 1rem;
}
@@ -45,7 +51,8 @@
--muted: #f5f5f5;
--muted-foreground: #737373;
/* Cyan AI accent — deep teal in light mode, neon cyan in dark mode */
/* Cyan AI accent — rgb(12, 96, 96) ONLY for light mode */
--cyan: rgb(12, 96, 96);
--cyan-ai: rgb(12, 96, 96);
--cyan-ai-10: rgba(12, 96, 96, 0.10);
--cyan-ai-20: rgba(12, 96, 96, 0.20);
@@ -53,6 +60,10 @@
--cyan-ai-40: rgba(12, 96, 96, 0.40);
--cyan-ai-50: rgba(12, 96, 96, 0.50);
--cyan-ai-80: rgba(12, 96, 96, 0.80);
/* Standard lightcyan and darkcyan remain identical/untouched */
--lightcyan: #e0ffff;
--darkcyan: #008b8b;
}
.dark {
@@ -72,6 +83,7 @@
--muted-foreground: #a3a3a3;
/* Cyan AI accent — neon cyan in dark mode */
--cyan: #00F0FF;
--cyan-ai: #00F0FF;
--cyan-ai-10: rgba(0, 240, 255, 0.10);
--cyan-ai-20: rgba(0, 240, 255, 0.20);
@@ -79,6 +91,10 @@
--cyan-ai-40: rgba(0, 240, 255, 0.40);
--cyan-ai-50: rgba(0, 240, 255, 0.50);
--cyan-ai-80: rgba(0, 240, 255, 0.80);
/* Standard lightcyan and darkcyan remain identical/untouched */
--lightcyan: #e0ffff;
--darkcyan: #008b8b;
}
body {

4
src/components/TierBadge.tsx
View File

@@ -1,4 +1,4 @@
import { Badge } from "@/components/ui/badge"
import { Badge } from "@/components/ui/badge"
interface TierBadgeProps {
tier: "Free" | "Pro" | "AI Coach"
@@ -14,7 +14,7 @@ export function TierBadge({ tier }: TierBadgeProps) {
}
return (
<Badge className="text-xs font-semibold uppercase tracking-wider bg-cyan-500/10 text-cyan-700 dark:text-cyan-400 border-cyan-500/20 hover:bg-cyan-500/20 transition-colors shadow-none dark:shadow-[0_0_10px_-2px_var(--cyan-ai)]">
<Badge className="text-xs font-semibold uppercase tracking-wider bg-cyan-500/10 text-[var(--cyan)] dark:text-cyan-400 border-cyan-500/20 hover:bg-cyan-500/20 transition-colors shadow-none dark:shadow-[0_0_10px_-2px_var(--cyan-ai)]">
AI Coach
</Badge>
)