Skip to main content

​
Chat Blue Isolation Guide

​
Overview

This guide explains how to implement chat features that maintain blue styling regardless of the selected brand palette (Tuscan/Modern/Forest).

​
CSS Variables (Already Configured)

The following CSS variables are available in globals.css under the .chat-context class: 
.chat-context {
  --chat-accent: 59 130 246;         /* #3b82f6 - blue-500 */
  --chat-accent-hover: 37 99 235;    /* #2563eb - blue-600 */
  --chat-accent-light: 219 234 254;  /* #dbeafe - blue-100 */
}

​
Implementation Strategy

​
1. Wrap Chat Routes with .chat-context

When creating a chat feature, wrap the layout/page with the .chat-context class: 
// Example: src/app/chat/layout.tsx
export default function ChatLayout({ children }) {
  return (
    <div className="chat-context">
      {children}
    </div>
  );
}

​
2. Use Chat-Specific Variables in Components

Within chat components, use the --chat-accent variables: 
// Example: Message bubble
<div className="bg-[rgb(var(--chat-accent-light))] border-[rgb(var(--chat-accent))] ...">
  <p className="text-[rgb(var(--chat-accent))]">Message text</p>
</div>

// Or with Tailwind arbitrary values
<button className="bg-[rgb(var(--chat-accent))] hover:bg-[rgb(var(--chat-accent-hover))]">
  Send
</button>

​
3. Alternative: Use Hardcoded Blue Classes

For simpler implementation, you can use standard Tailwind blue classes inside .chat-context: 
<div className="chat-context">
  <div className="bg-blue-50 border-blue-200">
    <span className="text-blue-600">Chat message</span>
  </div>
</div>
The .chat-context wrapper ensures these blue colors won’t be affected by brand palette switches.

​
Current State (No Chat Feature Yet)

As of TASKSET 4 completion:
  • ✅ CSS variables defined and ready
  • ✅ All non-chat blue usage removed (WorkspaceSwitcher now uses bg-accent)
  • ✅ Brand palette system operational
  • ⏳ Chat feature not yet implemented

​
Testing Checklist (When Chat is Added)

  • Open chat interface
  • Switch to Tuscan palette → Chat should stay blue
  • Switch to Modern palette → Chat should stay blue
  • Switch to Forest palette → Chat should stay blue
  • Verify message bubbles, buttons, and highlights use blue tones
  • Verify rest of app uses selected brand palette

​
Example Chat Component

// src/app/chat/page.tsx
"use client"

export default function ChatPage() {
  return (
    <div className="chat-context h-full flex flex-col">
      {/* Chat Header */}
      <header className="border-b px-4 py-3 bg-blue-50">
        <h1 className="text-lg font-semibold text-blue-900">Family Chat</h1>
      </header>

      {/* Messages */}
      <div className="flex-1 overflow-y-auto p-4 space-y-3">
        <div className="bg-blue-100 text-blue-900 rounded-lg px-4 py-2 max-w-md">
          Hello! This stays blue regardless of palette.
        </div>
      </div>

      {/* Input */}
      <div className="border-t p-4">
        <button className="bg-blue-500 hover:bg-blue-600 text-white px-4 py-2 rounded-lg">
          Send
        </button>
      </div>
    </div>
  )
}
  • web/apps/client/src/app/globals.css - Chat CSS variables
  • web/apps/client/src/components/brand-provider.tsx - Brand palette context
  • web/apps/client/src/shared/types/brand.ts - Brand type definitions