Skip to content

style(theme): retint light theme to a cool neutral/slate palette #462

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
Brosski224 wants to merge 1 commit into
base: main
Choose a base branch
from
Open

style(theme): retint light theme to a cool neutral/slate palette #462

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion premium
Open in desktop
Submodule premium updated from c0451a to a89a02
2 changes: 1 addition & 1 deletion src/components/Cropper.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -246,7 +246,7 @@ const Cropper: React.FC = () => {
<span
className="text-sm font-medium"
style={{
color: isLightTheme ? '#000000' : '#ffffff',
color: isLightTheme ? '#304058' : '#ffffff',
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif'
}}
>
Expand Down
12 changes: 6 additions & 6 deletions src/components/FeatureSpotlight.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -111,7 +111,7 @@ export const FeatureSpotlight: React.FC = () => {

return (
<div
className="relative h-full w-full overflow-hidden rounded-xl flex flex-col group select-none bg-gradient-to-br from-[#1C1C1E] to-[#151516]"
className="feature-spotlight-card relative h-full w-full overflow-hidden rounded-xl flex flex-col group select-none bg-gradient-to-br from-[#1C1C1E] to-[#151516]"
onMouseEnter={() => setIsPaused(true)}
onMouseLeave={() => setIsPaused(false)}
style={{ isolation: 'isolate' }}
Expand Down Expand Up @@ -178,7 +178,7 @@ export const FeatureSpotlight: React.FC = () => {

{/* Title */}
<h2
className={`drop-shadow-sm tracking-tight mb-0 transition-all duration-300 group-hover:brightness-105 ${isSupport ? 'translate-y-1.5' : ''}`}
className={`feature-spotlight-headline drop-shadow-sm tracking-tight mb-0 transition-all duration-300 group-hover:brightness-105 ${isSupport ? 'translate-y-1.5' : ''}`}
style={{
fontFamily: 'var(--font-system)',
fontSize: (isPremium || isSupport) ? '30px' : '26px',
Expand Down Expand Up @@ -212,7 +212,7 @@ export const FeatureSpotlight: React.FC = () => {
{currentFeature.bullets.map((bullet, idx) => (
<div key={idx} className={`flex items-center justify-center group/item transition-transform duration-200 px-2`}>

@github-actions github-actions Bot Aug 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/no-array-index-as-key (warning)

Your users can see & submit the wrong data when this list reorders or filters, so use a stable id like key={item.id}, not the array index "idx".

Fix → Use a stable id from the item, like key={item.id} or key={item.slug}. Index keys break when the list reorders or filters.

Docs

<span
className={`${isSupport ? 'text-[12px] leading-relaxed font-medium opacity-100' : 'text-[12.5px] leading-snug font-medium'}`}
className={`feature-spotlight-bullet ${isSupport ? 'text-[12px] leading-relaxed font-medium opacity-100' : 'text-[12.5px] leading-snug font-medium'}`}
style={{ letterSpacing: isSupport ? '0.01em' : '-0.01em', color: '#E6C46A' }}
>
{bullet}
Expand Down Expand Up @@ -252,7 +252,7 @@ export const FeatureSpotlight: React.FC = () => {
active:scale-[0.98]
overflow-hidden
${isSupport
? 'mt-2 translate-y-5 px-6 py-2 text-[13px] font-medium text-[#1C1C1E]'
? 'feature-spotlight-cta mt-2 translate-y-5 px-6 py-2 text-[13px] font-medium text-[#1C1C1E]'
: `px-10 py-2.5 text-[13px] font-medium text-[#F5F7FA]`
}
`}
Expand Down Expand Up @@ -307,7 +307,7 @@ export const FeatureSpotlight: React.FC = () => {
? 'Interested'
: (isSupport ? (
<span className="flex items-center gap-2">
<Rocket size={14} className="text-[#1C1C1E]" strokeWidth={2.5} />
<Rocket size={14} className="feature-spotlight-cta-icon text-[#1C1C1E]" strokeWidth={2.5} />
Fund development
</span>
) : (currentFeature.actionLabel || 'Mark interest'))
Expand All @@ -329,7 +329,7 @@ export const FeatureSpotlight: React.FC = () => {
{isSupport ? (
<ArrowRight
size={14}
className="text-[#1C1C1E] transition-colors duration-300"
className="feature-spotlight-cta-icon text-[#1C1C1E] transition-colors duration-300"
strokeWidth={2}
/>
) : (
Expand Down
2 changes: 1 addition & 1 deletion src/components/GlobalChatOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -143,7 +143,7 @@ const GlobalChatOverlay: React.FC<GlobalChatOverlayProps> = ({
// Match the meeting chat overlay / modes manager --mm-bg exactly so
// the expanded card looks like the same dark grey surface.
const isLightTheme = useResolvedTheme() === 'light';
const chatWindowBg = isLightTheme ? '#f9f9f9' : '#111111';
const chatWindowBg = isLightTheme ? '#FAFAFA' : '#111111';

const messagesEndRef = useRef<HTMLDivElement>(null);
const chatWindowRef = useRef<HTMLDivElement>(null);
Expand Down
2 changes: 1 addition & 1 deletion src/components/Launcher.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -787,7 +787,7 @@ const Launcher: React.FC<LauncherProps> = ({ onStartMeeting, onOpenSettings, onO
>
<path
d="M12 2C7.58172 2 4 5.58172 4 10V22L7 19L9.5 21.5L12 19L14.5 21.5L17 19L20 22V10C20 5.58172 16.4183 2 12 2Z"

@github-actions github-actions Bot Aug 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/rendering-svg-precision (warning)

Your users download extra bytes for SVG d precision they can't see, so round it to 1 or 2 decimals.

Fix → Round path, points, and transform decimals to 1 or 2 digits. The extra precision adds bytes with no visible difference.

Docs

fill={isLight ? '#48484A' : 'white'}
fill={isLight ? '#586878' : 'white'}
/>
<circle cx="9" cy="10" r="1.5" fill={isLight ? 'white' : 'black'} />
<circle cx="15" cy="10" r="1.5" fill={isLight ? 'white' : 'black'} />
Expand Down
2 changes: 1 addition & 1 deletion src/components/MeetingChatOverlay.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -217,7 +217,7 @@ const MeetingChatOverlay: React.FC<MeetingChatOverlayProps> = ({
// Match the modes manager's `--mm-bg` exactly so the expanded chat
// card looks like the same dark grey surface.
const isLightTheme = useResolvedTheme() === 'light';
const chatWindowBg = isLightTheme ? '#f9f9f9' : '#111111';
const chatWindowBg = isLightTheme ? '#FAFAFA' : '#111111';

// Submit initial query when overlay opens
useEffect(() => {

@github-actions github-actions Bot Aug 13, 2026

Copy link
Copy Markdown
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

React Doctor · react-doctor/effect-needs-cleanup (error)

setTimeout creates a timer in useEffect without guaranteed cleanup. Return a cleanup function that owns every allocation so it does not leak after unmount.

Fix → Return a cleanup function that stops the subscription or timer: return () => target.removeEventListener(name, handler) for listeners, return () => clearInterval(id) or clearTimeout(id) for timers, return () => observer.disconnect() for observers, return () => socket.close() for connections, or return unsubscribe if the subscribe call already gave you one.

Docs

Expand Down
2 changes: 1 addition & 1 deletion src/components/ModelSelectorWindow.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -293,7 +293,7 @@ const ModelSelectorWindow = () => {
const isDarkBg = interfaceTheme === 'liquid-glass' || interfaceTheme === 'modern' || !isLight;
const panelClass = isDarkBg
? 'bg-[#1E1E1E]/80 border-white/10 shadow-black/40'
: 'bg-[#F3F4F6]/92 border-black/10 shadow-black/10';
: 'bg-[#FAFAFA]/92 border-black/10 shadow-black/10';

return (
<div className="w-fit h-fit bg-transparent flex flex-col">
Expand Down
62 changes: 30 additions & 32 deletions src/components/ProfileIntelligenceSettings.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -77,43 +77,41 @@ const PI_CSS = `
--pi-r-pill: 9999px;
}
.pi-root[data-theme='light'] {
--pi-bg: #ffffff;
--pi-sidebar-bg: #f5f5f5;
--pi-border: rgba(0,0,0,0.08);
--pi-hero: #111827;
--pi-primary: #374151;
--pi-secondary: #6b7280;
--pi-tertiary: #9ca3af;
--pi-btn-bg: rgba(0,0,0,0.04);
--pi-btn-bg-hover: rgba(0,0,0,0.08);
--pi-btn-border: rgba(0,0,0,0.05);
--pi-item-hover: rgba(0,0,0,0.03);
--pi-item-active: rgba(0,0,0,0.06);
--pi-input-border: rgba(0,0,0,0.10);
--pi-accent: var(--periwinkle-600);
--pi-on-accent: var(--periwinkle-on-accent-light);
--pi-accent-subtle: color-mix(in srgb, var(--periwinkle-600) 8%, transparent);
--pi-bg: #F8F8F8;
--pi-sidebar-bg: #F0F0F0;
--pi-border: rgba(32,47,64,0.08);
--pi-hero: #304058;
--pi-primary: #304058;
--pi-secondary: #586878;
--pi-tertiary: #788898;
--pi-btn-bg: rgba(32,47,64,0.04);
--pi-btn-bg-hover: rgba(32,47,64,0.08);
--pi-btn-border: rgba(32,47,64,0.05);
--pi-item-hover: rgba(32,47,64,0.03);
--pi-item-active: rgba(32,47,64,0.06);
--pi-input-border: rgba(32,47,64,0.10);
--pi-accent: #384860;
--pi-on-accent: #FFFFFF;
--pi-accent-subtle: color-mix(in srgb, #384860 8%, transparent);
/* NO black scrim here. Dark mode's 25% smoke, applied over white, lands
on rgb(187,185,192) — a muddy grey slab, which is what it looked like
when it shipped. A light theme expresses "deeper surface" by taking
the tint up, not the luminance down, so this deepens the periwinkle
wash from 8% to 14%: rgb(237,230,249), ~18 levels under the page, and
still unmistakably lavender rather than grey. */
--pi-letter-bg: color-mix(in srgb, var(--periwinkle-600) 14%, transparent);
--pi-accent-border: color-mix(in srgb, var(--periwinkle-600) 16%, transparent);
--pi-accent-icon: var(--periwinkle-700);
on a muddy grey slab, which is what it looked like when it shipped.
A light theme expresses "deeper surface" by taking the tint up, not
the luminance down, so this deepens the slate wash from 8% to 14%. */
--pi-letter-bg: color-mix(in srgb, #384860 14%, transparent);
--pi-accent-border: color-mix(in srgb, #384860 16%, transparent);
--pi-accent-icon: #283848;
--pi-badge-text: var(--pi-accent);
--pi-badge-border: var(--pi-accent-border);
--pi-cta-accent-text: var(--periwinkle-700);
--pi-cta-accent-border: color-mix(in srgb, var(--periwinkle-600) 24%, transparent);
--pi-input-border-focus: color-mix(in srgb, var(--periwinkle-600) 40%, transparent);
--pi-input-bg-focus: color-mix(in srgb, var(--periwinkle-600) 4%, transparent);
--pi-cta-bg: #000000;
--pi-cta-accent-text: #283848;
--pi-cta-accent-border: color-mix(in srgb, #384860 24%, transparent);
--pi-input-border-focus: color-mix(in srgb, #384860 40%, transparent);
--pi-input-bg-focus: color-mix(in srgb, #384860 4%, transparent);
--pi-cta-bg: #304058;
--pi-cta-text: #ffffff;
--pi-cta-ring: rgba(255,255,255,0.10);
--pi-close-bg: rgba(0,0,0,0.05);
--pi-close-hover: rgba(0,0,0,0.10);
--pi-card-bg: rgba(0,0,0,0.015);
--pi-close-bg: rgba(32,47,64,0.05);
--pi-close-hover: rgba(32,47,64,0.10);
--pi-card-bg: rgba(32,47,64,0.02);
}

/* ── Keyframes ── */
Expand Down
4 changes: 2 additions & 2 deletions src/components/SettingsPopup.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -312,7 +312,7 @@ const SettingsPopup = () => {

const popupPanelClass = isDarkBg
? 'bg-[#1E1E1E]/80 border-white/10 shadow-black/40'
: 'bg-[#F3F4F6]/92 border-black/10 shadow-black/10';
: 'bg-[#FAFAFA]/92 border-black/10 shadow-black/10';
const itemHoverClass = isDarkBg ? 'hover:bg-white/5' : 'hover:bg-black/[0.04]';
const glassRowClass = 'glass-popup-row';
const labelColorClass = isDarkBg ? 'text-white' : 'text-slate-900';
Expand Down Expand Up @@ -371,7 +371,7 @@ const SettingsPopup = () => {
className={`w-4 h-4 transition-colors ${isUndetectable ? (isDarkBg ? 'text-white' : 'text-slate-900') : inactiveIconColorClass}`}
fill={isUndetectable ? "currentColor" : "none"}
stroke={isUndetectable ? "none" : "currentColor"}
eyeColor={isUndetectable ? (isDarkBg ? "black" : "white") : (isDarkBg ? "white" : "#334155")}
eyeColor={isUndetectable ? (isDarkBg ? "black" : "white") : (isDarkBg ? "white" : "#304058")}
/>
<span className={`text-[12px] font-medium transition-colors ${labelColorClass}`}>{isUndetectable ? 'Undetectable' : 'Detectable'}</span>
</div>
Expand Down
2 changes: 1 addition & 1 deletion src/components/TopSearchPill.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -277,7 +277,7 @@ const TopSearchPill: React.FC<TopSearchPillProps> = ({
<div
className={`
relative overflow-hidden
${isLight ? 'bg-[#F2F2F7]/90' : 'bg-[#161618]/90'}
${isLight ? 'bg-[#FAFAFA]/90' : 'bg-[#161618]/90'}
backdrop-blur-xl backdrop-saturate-150
rounded-2xl
shadow-sm
Expand Down
6 changes: 3 additions & 3 deletions src/components/ui/UpcomingCalendarCard.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -103,10 +103,10 @@ const UpcomingCalendarCard: React.FC<UpcomingCalendarCardProps> = ({
{/* Accent tint mask — only when connected, washes the calendar image into the brand accent */}
{isConnected && (
<>
<div className="absolute inset-0 bg-[#6b4574]/55 mix-blend-multiply" />
<div className="absolute inset-0 bg-gradient-to-b from-[#9a5fa8]/25 via-[#7a4f8a]/20 to-[#3d2245]/35" />
<div className="calendar-card-tint-mask absolute inset-0 bg-[#6b4574]/55 mix-blend-multiply" />
<div className="calendar-card-tint-wash absolute inset-0 bg-gradient-to-b from-[#9a5fa8]/25 via-[#7a4f8a]/20 to-[#3d2245]/35" />
{/* Soft top-glow */}
<div className="absolute -top-16 left-1/2 -translate-x-1/2 w-[260px] h-[200px] bg-[#e0b3e6]/20 blur-[80px] pointer-events-none" />
<div className="calendar-card-tint-glow absolute -top-16 left-1/2 -translate-x-1/2 w-[260px] h-[200px] bg-[#e0b3e6]/20 blur-[80px] pointer-events-none" />
</>
)}
{/* Subtle grain */}
Expand Down
Loading
Loading