From 9f6010dfacd0c680c61dc58a6dbefcdd9d355444 Mon Sep 17 00:00:00 2001 From: ectasy663 Date: Sun, 20 Sep 2026 13:23:06 +0530 Subject: [PATCH] style: set cyan to rgb(12, 96, 96) for light theme only, keeping dark theme neon cyan and standard lightcyan/darkcyan --- DESIGN_SYSTEM.md | 18 ++++++++++-------- src/app/globals.css | 18 +++++++++++++++++- src/components/TierBadge.tsx | 4 ++-- 3 files changed, 29 insertions(+), 11 deletions(-) diff --git a/DESIGN_SYSTEM.md b/DESIGN_SYSTEM.md index 8dd720c..d61e58a 100644 --- a/DESIGN_SYSTEM.md +++ b/DESIGN_SYSTEM.md @@ -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 | --- diff --git a/src/app/globals.css b/src/app/globals.css index 9221517..adc613a 100644 --- a/src/app/globals.css +++ b/src/app/globals.css @@ -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 { diff --git a/src/components/TierBadge.tsx b/src/components/TierBadge.tsx index d3522bd..7a825c3 100644 --- a/src/components/TierBadge.tsx +++ b/src/components/TierBadge.tsx @@ -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 ( - + AI Coach )