Skip to content

Commit c0c2bbe

Browse files
jonasnevesclaude
jonasneves
and
claude
committed
Redesign UI: light-first theme, teal accent, StoreDesk-inspired polish
- Switch default to light theme across all demos and homepage - Replace cyan accent (#38bdf8) with teal (#0d9488 light, #2dd4bf dark) - New light palette: white surfaces, #f8f9fb bg, subtle gray borders - New dark palette: richer #0f1117 bg, cleaner surface hierarchy - Reduce shadow opacity from 0.3–0.5 to 0.05–0.12 for lighter feel - Fix headers: 52px height, white bg, subtle 1px box-shadow - Homepage: teal kicker text, emoji card icons, pill-style tag badges - Dialog backdrop: blur(4px) + rgba(0,0,0,0.4) Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
1 parent 14fbd4b commit c0c2bbe

5 files changed

Lines changed: 234 additions & 158 deletions

File tree

‎chat.css‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -459,7 +459,7 @@ dialog {
459459
color: var(--text);
460460
}
461461

462-
dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
462+
dialog::backdrop { background: rgba(0, 0, 0, 0.4); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); }
463463

464464
.dialog-title {
465465
font-size: var(--text-base);
@@ -638,7 +638,7 @@ dialog::backdrop { background: rgba(0, 0, 0, 0.6); }
638638
.chat-model-select:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
639639

640640
html[data-theme="dark"] .chat-model-select {
641-
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%2394a3b8' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
641+
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%238b92a5' stroke-width='1.5' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
642642
}
643643

644644
.chat-auth-input {

‎countries/index.html‎

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
66
<meta name="robots" content="noindex, nofollow">
7-
<meta name="theme-color" content="#0f172a">
7+
<meta name="theme-color" content="#f8f9fb">
88
<title>WebMCP PoC — World Countries</title>
99
<style>
1010
:root {
11-
--bg: #0f172a;
12-
--surface: #1e293b;
13-
--surface-alt: #334155;
14-
--border: #475569;
15-
--text: #f1f5f9;
16-
--text-muted: #94a3b8;
17-
--accent: #38bdf8;
18-
--accent-dim: #0c4a6e;
19-
--size-small: #22c55e;
20-
--size-med: #f59e0b;
21-
--size-large: #ef4444;
22-
--flag: #f59e0b;
23-
--badge-green-bg: #052e16;
24-
--badge-amber-bg: #451a03;
25-
--badge-red-bg: #450a0a;
26-
--badge-cyan-bg: #0c4a6e;
11+
--bg: #f8f9fb;
12+
--surface: #ffffff;
13+
--surface-alt: #edeef1;
14+
--border: #d1d5db;
15+
--text: #1a1a1a;
16+
--text-muted: #6b7280;
17+
--accent: #0d9488;
18+
--accent-dim: #ccfbf1;
19+
--size-small: #16a34a;
20+
--size-med: #d97706;
21+
--size-large: #dc2626;
22+
--flag: #d97706;
23+
--badge-green-bg: #dcfce7;
24+
--badge-amber-bg: #fef3c7;
25+
--badge-red-bg: #fee2e2;
26+
--badge-cyan-bg: #ccfbf1;
2727
--radius-sm: 6px;
2828
--radius: 10px;
2929
--radius-lg: 14px;
@@ -41,27 +41,34 @@
4141
--space-lg: 24px;
4242
--space-xl: 32px;
4343
--space-2xl: 48px;
44-
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
45-
--shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
46-
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
44+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
45+
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
46+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
4747
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
4848
--duration: 150ms;
4949
--duration-slow: 300ms;
5050
}
5151

52-
html[data-theme="light"] {
53-
--bg: #f8fafc;
54-
--surface: #f1f5f9;
55-
--surface-alt: #e2e8f0;
56-
--border: #cbd5e1;
57-
--text: #0f172a;
58-
--text-muted: #64748b;
59-
--accent: #0284c7;
60-
--accent-dim: #e0f2fe;
61-
--badge-green-bg: #dcfce7;
62-
--badge-amber-bg: #fef3c7;
63-
--badge-red-bg: #fee2e2;
64-
--badge-cyan-bg: #e0f2fe;
52+
html[data-theme="dark"] {
53+
--bg: #0f1117;
54+
--surface: #1a1d24;
55+
--surface-alt: #21252d;
56+
--border: #2d3139;
57+
--text: #e8eaf0;
58+
--text-muted: #8b92a5;
59+
--accent: #2dd4bf;
60+
--accent-dim: #0f3935;
61+
--size-small: #22c55e;
62+
--size-med: #f59e0b;
63+
--size-large: #ef4444;
64+
--flag: #f59e0b;
65+
--badge-green-bg: #052e16;
66+
--badge-amber-bg: #3d1f00;
67+
--badge-red-bg: #3d0a0a;
68+
--badge-cyan-bg: #0f3935;
69+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
70+
--shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
71+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
6572
}
6673

6774
@media (prefers-reduced-motion: reduce) {
@@ -94,8 +101,12 @@
94101
display: flex;
95102
align-items: center;
96103
justify-content: space-between;
97-
padding: var(--space-md) var(--space-lg);
104+
height: 52px;
105+
padding: 0 var(--space-lg);
98106
border-bottom: 1px solid var(--border);
107+
background: var(--surface);
108+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
109+
flex-shrink: 0;
99110
}
100111

101112
.header-left {
@@ -105,7 +116,7 @@
105116
}
106117

107118
header h1 {
108-
font-size: var(--text-lg);
119+
font-size: var(--text-base);
109120
font-weight: 600;
110121
letter-spacing: -0.02em;
111122
}
@@ -670,7 +681,7 @@ <h1>WebMCP PoC</h1>
670681
/* ── Theme ── */
671682

672683
(function () {
673-
const stored = localStorage.getItem('webmcp-theme') || 'dark';
684+
const stored = localStorage.getItem('webmcp-theme') || 'light';
674685
const resolved = stored === 'system'
675686
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
676687
: stored;
@@ -1660,7 +1671,7 @@ <h2>${flag ? '<span class="flag-dot"></span>' : ''}${c.flag} ${c.name}</h2>
16601671
: pref;
16611672
document.documentElement.dataset.theme = resolved;
16621673
const meta = document.querySelector('meta[name="theme-color"]');
1663-
if (meta) meta.content = resolved === 'light' ? '#f8fafc' : '#0f172a';
1674+
if (meta) meta.content = resolved === 'light' ? '#f8f9fb' : '#0f1117';
16641675
document.querySelectorAll('.theme-opt').forEach(btn => {
16651676
btn.classList.toggle('active', btn.dataset.theme === pref);
16661677
});
@@ -1674,7 +1685,7 @@ <h2>${flag ? '<span class="flag-dot"></span>' : ''}${c.flag} ${c.name}</h2>
16741685
if (localStorage.getItem('webmcp-theme') === 'system') applyTheme('system');
16751686
});
16761687

1677-
applyTheme(localStorage.getItem('webmcp-theme') || 'dark');
1688+
applyTheme(localStorage.getItem('webmcp-theme') || 'light');
16781689

16791690
/* ── Settings popover ── */
16801691

‎earthquakes/index.html‎

Lines changed: 50 additions & 39 deletions
Original file line numberDiff line numberDiff line change
@@ -1,29 +1,29 @@
11
<!DOCTYPE html>
2-
<html lang="en" data-theme="dark">
2+
<html lang="en" data-theme="light">
33
<head>
44
<meta charset="UTF-8">
55
<meta name="viewport" content="width=device-width, initial-scale=1.0, viewport-fit=cover">
66
<meta name="robots" content="noindex, nofollow">
7-
<meta name="theme-color" content="#0f172a">
7+
<meta name="theme-color" content="#f8f9fb">
88
<title>WebMCP PoC — Earthquake Monitor</title>
99
<style>
1010
:root {
11-
--bg: #0f172a;
12-
--surface: #1e293b;
13-
--surface-alt: #334155;
14-
--border: #475569;
15-
--text: #f1f5f9;
16-
--text-muted: #94a3b8;
17-
--accent: #38bdf8;
18-
--accent-dim: #0c4a6e;
19-
--risk-low: #22c55e;
20-
--risk-med: #f59e0b;
21-
--risk-high: #ef4444;
22-
--flag: #f59e0b;
23-
--badge-green-bg: #052e16;
24-
--badge-amber-bg: #451a03;
25-
--badge-red-bg: #450a0a;
26-
--badge-cyan-bg: #0c4a6e;
11+
--bg: #f8f9fb;
12+
--surface: #ffffff;
13+
--surface-alt: #edeef1;
14+
--border: #d1d5db;
15+
--text: #1a1a1a;
16+
--text-muted: #6b7280;
17+
--accent: #0d9488;
18+
--accent-dim: #ccfbf1;
19+
--risk-low: #16a34a;
20+
--risk-med: #d97706;
21+
--risk-high: #dc2626;
22+
--flag: #d97706;
23+
--badge-green-bg: #dcfce7;
24+
--badge-amber-bg: #fef3c7;
25+
--badge-red-bg: #fee2e2;
26+
--badge-cyan-bg: #ccfbf1;
2727
--radius-sm: 6px;
2828
--radius: 10px;
2929
--radius-lg: 14px;
@@ -41,27 +41,34 @@
4141
--space-lg: 24px;
4242
--space-xl: 32px;
4343
--space-2xl: 48px;
44-
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
45-
--shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
46-
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
44+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08), 0 1px 2px rgba(0, 0, 0, 0.05);
45+
--shadow: 0 4px 12px rgba(0, 0, 0, 0.08), 0 1px 4px rgba(0, 0, 0, 0.04);
46+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12), 0 4px 8px rgba(0, 0, 0, 0.06);
4747
--ease: cubic-bezier(0.2, 0.8, 0.2, 1);
4848
--duration: 150ms;
4949
--duration-slow: 300ms;
5050
}
5151

52-
html[data-theme="light"] {
53-
--bg: #f8fafc;
54-
--surface: #f1f5f9;
55-
--surface-alt: #e2e8f0;
56-
--border: #cbd5e1;
57-
--text: #0f172a;
58-
--text-muted: #64748b;
59-
--accent: #0284c7;
60-
--accent-dim: #e0f2fe;
61-
--badge-green-bg: #dcfce7;
62-
--badge-amber-bg: #fef3c7;
63-
--badge-red-bg: #fee2e2;
64-
--badge-cyan-bg: #e0f2fe;
52+
html[data-theme="dark"] {
53+
--bg: #0f1117;
54+
--surface: #1a1d24;
55+
--surface-alt: #21252d;
56+
--border: #2d3139;
57+
--text: #e8eaf0;
58+
--text-muted: #8b92a5;
59+
--accent: #2dd4bf;
60+
--accent-dim: #0f3935;
61+
--risk-low: #22c55e;
62+
--risk-med: #f59e0b;
63+
--risk-high: #ef4444;
64+
--flag: #f59e0b;
65+
--badge-green-bg: #052e16;
66+
--badge-amber-bg: #3d1f00;
67+
--badge-red-bg: #3d0a0a;
68+
--badge-cyan-bg: #0f3935;
69+
--shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2);
70+
--shadow: 0 4px 12px rgba(0, 0, 0, 0.35), 0 1px 4px rgba(0, 0, 0, 0.2);
71+
--shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5), 0 4px 8px rgba(0, 0, 0, 0.3);
6572
}
6673

6774
@media (prefers-reduced-motion: reduce) {
@@ -94,8 +101,12 @@
94101
display: flex;
95102
align-items: center;
96103
justify-content: space-between;
97-
padding: var(--space-md) var(--space-lg);
104+
height: 52px;
105+
padding: 0 var(--space-lg);
98106
border-bottom: 1px solid var(--border);
107+
background: var(--surface);
108+
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.04);
109+
flex-shrink: 0;
99110
}
100111

101112
.header-left {
@@ -105,7 +116,7 @@
105116
}
106117

107118
header h1 {
108-
font-size: var(--text-lg);
119+
font-size: var(--text-base);
109120
font-weight: 600;
110121
letter-spacing: -0.02em;
111122
}
@@ -664,7 +675,7 @@ <h1>WebMCP PoC</h1>
664675
/* ── Theme ── */
665676

666677
(function () {
667-
const stored = localStorage.getItem('webmcp-theme') || 'dark';
678+
const stored = localStorage.getItem('webmcp-theme') || 'light';
668679
const resolved = stored === 'system'
669680
? (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light')
670681
: stored;
@@ -1714,7 +1725,7 @@ <h2>${flag ? '<span class="flag-dot"></span>' : ''}${q.place}</h2>
17141725
: pref;
17151726
document.documentElement.dataset.theme = resolved;
17161727
const meta = document.querySelector('meta[name="theme-color"]');
1717-
if (meta) meta.content = resolved === 'light' ? '#f8fafc' : '#0f172a';
1728+
if (meta) meta.content = resolved === 'light' ? '#f8f9fb' : '#0f1117';
17181729
document.querySelectorAll('.theme-opt').forEach(btn => {
17191730
btn.classList.toggle('active', btn.dataset.theme === pref);
17201731
});
@@ -1728,7 +1739,7 @@ <h2>${flag ? '<span class="flag-dot"></span>' : ''}${q.place}</h2>
17281739
if (localStorage.getItem('webmcp-theme') === 'system') applyTheme('system');
17291740
});
17301741

1731-
applyTheme(localStorage.getItem('webmcp-theme') || 'dark');
1742+
applyTheme(localStorage.getItem('webmcp-theme') || 'light');
17321743

17331744
/* ── Settings popover ── */
17341745

0 commit comments

Comments
 (0)