Skip to content

Commit a159fe8

Browse files
vilmirevilmire
committed
style: align ember defaults with landing palette
1 parent 2f0397e commit a159fe8

3 files changed

Lines changed: 106 additions & 106 deletions

File tree

‎packages/web-core/src/components/settings/ChatThemeSection.tsx‎

Lines changed: 33 additions & 33 deletions
Original file line numberDiff line numberDiff line change
@@ -40,42 +40,42 @@ export interface CustomThemeColors {
4040
}
4141

4242
const DEFAULT_CUSTOM_DARK: CustomThemeColors = {
43-
bgPrimary: '#0f0f13',
44-
bgSecondary: '#18181d',
45-
surfacePrimary: '#111116',
46-
textPrimary: '#fafafa',
47-
textSecondary: '#a8a8b3',
48-
textMuted: '#7e7e8a',
49-
borderSubtle: '#1a1a22',
50-
borderDefault: '#2a2a35',
51-
accentColor: '#cf7a45',
52-
userBubble: '#e7a677',
43+
bgPrimary: '#0a0e1a',
44+
bgSecondary: '#0f1320',
45+
surfacePrimary: '#111726',
46+
textPrimary: '#f0f0f5',
47+
textSecondary: '#9ca3af',
48+
textMuted: '#6b7280',
49+
borderSubtle: '#1d2536',
50+
borderDefault: '#313c52',
51+
accentColor: '#d97706',
52+
userBubble: '#f59e0b',
5353
userText: '#1a1a1a',
54-
assistantBubble: '#1e1e24',
55-
assistantText: '#e0e0e0',
56-
containerBg: '#111114',
57-
sendButton: '#cf7a45',
58-
inputBorder: '#2a2a35',
54+
assistantBubble: '#111726',
55+
assistantText: '#f0f0f5',
56+
containerBg: '#0f1320',
57+
sendButton: '#d97706',
58+
inputBorder: '#313c52',
5959
bubbleRadius: 16,
6060
}
6161

6262
const DEFAULT_CUSTOM_LIGHT: CustomThemeColors = {
63-
bgPrimary: '#f0f1f5',
64-
bgSecondary: '#e8eaf0',
63+
bgPrimary: '#fff8ee',
64+
bgSecondary: '#fff1de',
6565
surfacePrimary: '#ffffff',
66-
textPrimary: '#1a1a2e',
67-
textSecondary: '#3f3f50',
68-
textMuted: '#5c5c6e',
69-
borderSubtle: '#d8d8e0',
70-
borderDefault: '#c0c0cc',
71-
accentColor: '#c86f42',
72-
userBubble: '#e7a677',
66+
textPrimary: '#24160f',
67+
textSecondary: '#6f6255',
68+
textMuted: '#938374',
69+
borderSubtle: '#e7d3ba',
70+
borderDefault: '#d7b892',
71+
accentColor: '#d97706',
72+
userBubble: '#f59e0b',
7373
userText: '#1a1a1a',
74-
assistantBubble: '#f3f4f6',
75-
assistantText: '#1f2937',
76-
containerBg: '#f0f1f5',
77-
sendButton: '#c86f42',
78-
inputBorder: '#d1d5db',
74+
assistantBubble: '#fffaf4',
75+
assistantText: '#24160f',
76+
containerBg: '#fff8ee',
77+
sendButton: '#d97706',
78+
inputBorder: '#d7b892',
7979
bubbleRadius: 16,
8080
}
8181

@@ -92,10 +92,10 @@ export const CHAT_THEMES: ChatThemePreset[] = [
9292
{
9393
id: 'ember',
9494
name: 'Ember',
95-
description: 'Default warm accent theme',
95+
description: 'Default landing-inspired amber theme',
9696
preview: {
97-
dark: { userBubble: '#e7a677', assistantBubble: '#18181d', assistantBorder: '1px solid rgba(255,255,255,0.08)', containerBg: '#0f0f13', textColor: 'rgba(255,255,255,0.7)' },
98-
light: { userBubble: '#e7a677', assistantBubble: '#ffffff', assistantBorder: '1px solid rgba(0,0,0,0.08)', containerBg: '#f0f1f5', textColor: '#52525b' },
97+
dark: { userBubble: '#f59e0b', assistantBubble: '#111726', assistantBorder: '1px solid rgba(255,255,255,0.08)', containerBg: '#0a0e1a', textColor: '#9ca3af' },
98+
light: { userBubble: '#f59e0b', assistantBubble: '#fffaf4', assistantBorder: '1px solid rgba(146,64,14,0.10)', containerBg: '#fff8ee', textColor: '#6f6255' },
9999
},
100100
},
101101
{
@@ -157,7 +157,7 @@ function lightenHex(hex: string, amount: number): string {
157157

158158
const PRESET_ACCENTS: Record<string, { dark: string; light: string }> = {
159159
midnight: { dark: '#8b5cf6', light: '#7c3aed' },
160-
ember: { dark: '#cf7a45', light: '#c86f42' },
160+
ember: { dark: '#d97706', light: '#d97706' },
161161
aurora: { dark: '#ec4899', light: '#ec4899' },
162162
honey: { dark: '#fbbf24', light: '#fbbf24' },
163163
}

‎packages/web-core/src/hooks/useTheme.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
* useTheme — Shared theme hook for dark/light/system mode.
33
*
44
* Reads from localStorage('theme') — 'dark' | 'light' | 'system'.
5-
* 'system' follows the OS preference via prefers-color-scheme.
5+
* Default is dark so the first-run product surface matches the landing palette.
66
* Sets data-theme attribute on <html> and persists choice.
77
*/
88
import { useState, useEffect, useCallback } from 'react'
@@ -20,7 +20,7 @@ function getStoredPreference(): ThemePreference {
2020
const v = localStorage.getItem('theme')
2121
if (v === 'dark' || v === 'light' || v === 'system') return v
2222
} catch { /* noop */ }
23-
return 'system' // default to system
23+
return 'dark'
2424
}
2525

2626
function resolveTheme(pref: ThemePreference): Theme {

‎packages/web-core/src/index.css‎

Lines changed: 71 additions & 71 deletions
Original file line numberDiff line numberDiff line change
@@ -81,27 +81,27 @@ button {
8181

8282
:root {
8383
/* ── Dark Mode (default) ── */
84-
--bg-primary: #0f0f13;
85-
--bg-secondary: #18181d;
86-
--bg-card: rgba(26, 26, 32, 0.9);
84+
--bg-primary: #0a0e1a;
85+
--bg-secondary: #0f1320;
86+
--bg-card: rgba(15, 19, 32, 0.92);
8787
--bg-glass: rgba(255, 255, 255, 0.04);
88-
--bg-glass-hover: rgba(255, 255, 255, 0.08);
88+
--bg-glass-hover: rgba(255, 255, 255, 0.06);
8989

90-
--surface-primary: #111116;
91-
--surface-secondary: #18181d;
90+
--surface-primary: #111726;
91+
--surface-secondary: #151b2d;
9292

93-
--border-subtle: rgba(255, 255, 255, 0.09);
94-
--border-default: rgba(255, 255, 255, 0.14);
95-
--border-accent: rgba(139, 92, 246, 0.40);
93+
--border-subtle: rgba(255, 255, 255, 0.06);
94+
--border-default: rgba(255, 255, 255, 0.10);
95+
--border-accent: rgba(217, 119, 6, 0.24);
9696

97-
--text-primary: #fafafa;
98-
--text-secondary: #a8a8b3;
99-
--text-muted: #7e7e8a;
97+
--text-primary: #f0f0f5;
98+
--text-secondary: #9ca3af;
99+
--text-muted: #6b7280;
100100

101-
--accent-primary: #cf7a45;
102-
--accent-primary-light: #e5a176;
103-
--accent-secondary: #edbe95;
104-
--accent-gradient: linear-gradient(135deg, #cf7a45, #e5a176);
101+
--accent-primary: #d97706;
102+
--accent-primary-light: #f59e0b;
103+
--accent-secondary: #fbbf24;
104+
--accent-gradient: linear-gradient(135deg, #d97706, #f59e0b);
105105

106106
--status-online: #22c55e;
107107
--status-idle: #eab308;
@@ -119,27 +119,27 @@ button {
119119

120120
/* ── Light Mode ────────────────────────────────── */
121121
:root[data-theme="light"] {
122-
--bg-primary: #f6f7f9;
122+
--bg-primary: #fff8ee;
123123
--bg-secondary: #ffffff;
124-
--bg-card: rgba(255, 255, 255, 0.95);
125-
--bg-glass: rgba(0, 0, 0, 0.03);
126-
--bg-glass-hover: rgba(0, 0, 0, 0.06);
124+
--bg-card: rgba(255, 255, 255, 0.96);
125+
--bg-glass: rgba(217, 119, 6, 0.05);
126+
--bg-glass-hover: rgba(217, 119, 6, 0.08);
127127

128128
--surface-primary: #ffffff;
129-
--surface-secondary: #f6f7f9;
129+
--surface-secondary: #fff1de;
130130

131-
--border-subtle: rgba(0, 0, 0, 0.08);
132-
--border-default: rgba(0, 0, 0, 0.14);
133-
--border-accent: rgba(207, 122, 69, 0.30);
131+
--border-subtle: rgba(146, 64, 14, 0.08);
132+
--border-default: rgba(146, 64, 14, 0.14);
133+
--border-accent: rgba(217, 119, 6, 0.22);
134134

135-
--text-primary: #1a1a2e;
136-
--text-secondary: #52525b;
137-
--text-muted: #71717a;
135+
--text-primary: #24160f;
136+
--text-secondary: #6f6255;
137+
--text-muted: #938374;
138138

139-
--accent-primary: #c86f42;
140-
--accent-primary-light: #df9067;
141-
--accent-secondary: #ebb38c;
142-
--accent-gradient: linear-gradient(135deg, #c86f42, #df9067);
139+
--accent-primary: #d97706;
140+
--accent-primary-light: #f59e0b;
141+
--accent-secondary: #fbbf24;
142+
--accent-gradient: linear-gradient(135deg, #d97706, #f59e0b);
143143

144144
--status-online: #16a34a;
145145
--status-idle: #ca8a04;
@@ -153,27 +153,27 @@ button {
153153
/* Also respond to system preference when no explicit data-theme */
154154
@media (prefers-color-scheme: light) {
155155
:root:not([data-theme="dark"]) {
156-
--bg-primary: #f6f7f9;
156+
--bg-primary: #fff8ee;
157157
--bg-secondary: #ffffff;
158-
--bg-card: rgba(255, 255, 255, 0.95);
159-
--bg-glass: rgba(0, 0, 0, 0.03);
160-
--bg-glass-hover: rgba(0, 0, 0, 0.06);
158+
--bg-card: rgba(255, 255, 255, 0.96);
159+
--bg-glass: rgba(217, 119, 6, 0.05);
160+
--bg-glass-hover: rgba(217, 119, 6, 0.08);
161161

162162
--surface-primary: #ffffff;
163-
--surface-secondary: #f6f7f9;
163+
--surface-secondary: #fff1de;
164164

165-
--border-subtle: rgba(0, 0, 0, 0.08);
166-
--border-default: rgba(0, 0, 0, 0.14);
167-
--border-accent: rgba(139, 92, 246, 0.30);
165+
--border-subtle: rgba(146, 64, 14, 0.08);
166+
--border-default: rgba(146, 64, 14, 0.14);
167+
--border-accent: rgba(217, 119, 6, 0.22);
168168

169-
--text-primary: #1a1a2e;
170-
--text-secondary: #52525b;
171-
--text-muted: #71717a;
169+
--text-primary: #24160f;
170+
--text-secondary: #6f6255;
171+
--text-muted: #938374;
172172

173-
--accent-primary: #7c3aed;
174-
--accent-primary-light: #6d28d9;
175-
--accent-secondary: #0ea5e9;
176-
--accent-gradient: linear-gradient(135deg, #7c3aed, #0ea5e9);
173+
--accent-primary: #d97706;
174+
--accent-primary-light: #f59e0b;
175+
--accent-secondary: #fbbf24;
176+
--accent-gradient: linear-gradient(135deg, #d97706, #f59e0b);
177177

178178
--status-online: #16a34a;
179179
--status-idle: #ca8a04;
@@ -434,31 +434,31 @@ a:hover {
434434

435435
/* ── Chat Theme: Ember (Dark) ──────────────────── */
436436
:root[data-chat-theme="ember"] {
437-
--chat-user-bg: #e7a677;
437+
--chat-user-bg: #f59e0b;
438438
--chat-user-color: #1a1a1a;
439-
--chat-assistant-bg: #18181d;
439+
--chat-assistant-bg: #111726;
440440
--chat-assistant-border: 1px solid rgba(255, 255, 255, 0.08);
441-
--chat-action-bg: rgba(207, 122, 69, 0.08);
442-
--chat-action-border: 1px solid rgba(207, 122, 69, 0.16);
443-
--chat-action-color: #cf7a45;
444-
--chat-container-bg: #0f0f13;
445-
--chat-typing-bg: #18181d;
441+
--chat-action-bg: rgba(217, 119, 6, 0.10);
442+
--chat-action-border: 1px solid rgba(217, 119, 6, 0.20);
443+
--chat-action-color: #f59e0b;
444+
--chat-container-bg: #0a0e1a;
445+
--chat-typing-bg: #111726;
446446
--chat-typing-border: 1px solid rgba(255, 255, 255, 0.08);
447447
}
448448

449449
/* ── Chat Theme: Ember (Light) ─────────────────── */
450450
:root[data-theme="light"][data-chat-theme="ember"] {
451-
--chat-user-bg: #e7a677;
451+
--chat-user-bg: #f59e0b;
452452
--chat-user-color: #1a1a1a;
453-
--chat-assistant-bg: #ffffff;
454-
--chat-assistant-color: #1a1a2e;
455-
--chat-assistant-border: 1px solid rgba(0, 0, 0, 0.08);
456-
--chat-action-bg: rgba(200, 111, 66, 0.06);
457-
--chat-action-border: 1px solid rgba(200, 111, 66, 0.14);
458-
--chat-action-color: #9a4f28;
459-
--chat-container-bg: #f0f1f5;
453+
--chat-assistant-bg: #fffaf4;
454+
--chat-assistant-color: #24160f;
455+
--chat-assistant-border: 1px solid rgba(146, 64, 14, 0.10);
456+
--chat-action-bg: rgba(217, 119, 6, 0.07);
457+
--chat-action-border: 1px solid rgba(217, 119, 6, 0.16);
458+
--chat-action-color: #b45309;
459+
--chat-container-bg: #fff8ee;
460460
--chat-typing-bg: #ffffff;
461-
--chat-typing-border: 1px solid rgba(0, 0, 0, 0.08);
461+
--chat-typing-border: 1px solid rgba(146, 64, 14, 0.10);
462462
}
463463

464464
/* ── Chat Element Classes ──────────────────────── */
@@ -786,17 +786,17 @@ a:hover {
786786
}
787787

788788
:root:not([data-theme="dark"])[data-chat-theme="ember"] {
789-
--chat-user-bg: #d6aa53;
789+
--chat-user-bg: #f59e0b;
790790
--chat-user-color: #1a1a1a;
791-
--chat-assistant-bg: #ffffff;
792-
--chat-assistant-color: #1a1a2e;
793-
--chat-assistant-border: 1px solid rgba(0, 0, 0, 0.08);
794-
--chat-action-bg: rgba(161, 98, 7, 0.06);
795-
--chat-action-border: 1px solid rgba(161, 98, 7, 0.14);
796-
--chat-action-color: #92400e;
797-
--chat-container-bg: #f0f1f5;
791+
--chat-assistant-bg: #fffaf4;
792+
--chat-assistant-color: #24160f;
793+
--chat-assistant-border: 1px solid rgba(146, 64, 14, 0.10);
794+
--chat-action-bg: rgba(217, 119, 6, 0.07);
795+
--chat-action-border: 1px solid rgba(217, 119, 6, 0.16);
796+
--chat-action-color: #b45309;
797+
--chat-container-bg: #fff8ee;
798798
--chat-typing-bg: #ffffff;
799-
--chat-typing-border: 1px solid rgba(0, 0, 0, 0.08);
799+
--chat-typing-border: 1px solid rgba(146, 64, 14, 0.10);
800800
}
801801

802802
:root:not([data-theme="dark"])[data-chat-theme="aurora"] {

0 commit comments

Comments
 (0)