Skip to content

chore(web-ui): refresh default theme tokens #115

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

Merged
ymkiux merged 3 commits into from
Apr 29, 2026
Merged

chore(web-ui): refresh default theme tokens #115

Show file tree
Hide file tree
Changes from 1 commit
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
9e875c2
style(web-ui): neutral craft-like theme tokens
ymkiux Apr 29, 2026
377e9b7
docs(readme): refine project tagline
ymkiux Apr 29, 2026
9d3f2b5
docs(readme): clarify local-first value
ymkiux Apr 29, 2026
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
54 changes: 29 additions & 25 deletions web-ui/styles/base-theme.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,30 +4,34 @@
设计系统 - Design Tokens
============================================ */
:root {
/* 色彩系统：温和中性暖灰 + 柔粉强调 */
/* 色彩系统：中性灰（更贴近 craft/shadcn 观感）+ 品牌强调 */
--color-brand: #C77462;
--color-brand-dark: #B45E4E;
--color-brand-light: rgba(199, 116, 98, 0.14);
--color-brand-subtle: rgba(199, 116, 98, 0.2);
--color-brand-light: rgba(199, 116, 98, 0.12);
--color-brand-subtle: rgba(199, 116, 98, 0.18);

--color-bg: #F7F3EF;
--color-surface: #FFFDFC;
--color-surface-alt: #F8F3EE;
--color-bg: #FAFAFA;
--color-surface: #FFFFFF;
--color-surface-alt: #F4F4F5;
--color-surface-elevated: #FFFFFF;
--color-surface-tint: rgba(255, 253, 252, 0.9);
--color-text-primary: #241F1C;
--color-text-secondary: #5A514B;
--color-text-tertiary: #7A6E66;
--color-text-muted: #A39286;
--color-border: #E7DDD4;
--color-border-soft: rgba(163, 146, 134, 0.22);
--color-border-strong: rgba(163, 146, 134, 0.4);
--color-surface-tint: rgba(255, 255, 255, 0.92);
--color-text-primary: #18181B;
--color-text-secondary: #3F3F46;
--color-text-tertiary: #71717A;
--color-text-muted: #A1A1AA;
--color-border: #E4E4E7;
--color-border-soft: rgba(24, 24, 27, 0.12);
--color-border-strong: rgba(24, 24, 27, 0.24);

--color-success: #4B8B6A;
--color-error: #C44536;

--bg-warm-gradient:
linear-gradient(180deg, #F7F3EF 0%, #F7F3EF 100%);
linear-gradient(180deg, #FAFAFA 0%, #FAFAFA 100%);

--color-bg-topbar-strong: rgba(250, 250, 250, 0.96);
--color-bg-topbar-soft: rgba(250, 250, 250, 0.9);
--color-bg-topbar-clear: rgba(250, 250, 250, 0);

/* 字体系统 */
--font-family-body: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans SC', 'PingFang SC', 'Microsoft YaHei', sans-serif;
Expand Down Expand Up @@ -63,21 +67,21 @@
--radius-sm: 8px;
--radius-md: 10px;
--radius-lg: 12px;
--radius-xl: 18px;
--radius-xl: 16px;
--radius-full: 50px;

/* 阴影系统 - 温和、轻量 */
--shadow-subtle: 0 1px 2px rgba(36, 31, 28, 0.03);
--shadow-card: 0 4px 12px rgba(36, 31, 28, 0.045);
--shadow-card-hover: 0 8px 22px rgba(36, 31, 28, 0.07);
--shadow-float: 0 12px 28px rgba(36, 31, 28, 0.1);
--shadow-raised: 0 8px 18px rgba(36, 31, 28, 0.08);
/* 阴影系统 - 更偏中性与克制 */
--shadow-subtle: 0 1px 2px rgba(24, 24, 27, 0.04);
--shadow-card: 0 1px 3px rgba(24, 24, 27, 0.06);
--shadow-card-hover: 0 8px 26px rgba(24, 24, 27, 0.12);
--shadow-float: 0 14px 36px rgba(24, 24, 27, 0.16);
--shadow-raised: 0 8px 18px rgba(24, 24, 27, 0.12);
--shadow-modal:
0 8px 24px rgba(36, 31, 28, 0.08),
0 24px 64px rgba(36, 31, 28, 0.05);
0 10px 30px rgba(24, 24, 27, 0.14),
0 28px 72px rgba(24, 24, 27, 0.12);
--shadow-input-focus:
0 0 0 3px var(--color-brand-light),
0 1px 3px rgba(31, 26, 23, 0.04);
0 1px 2px rgba(24, 24, 27, 0.06);

/* 动画 - 更细腻的曲线 */
--transition-instant: 100ms;
Expand Down
2 changes: 1 addition & 1 deletion web-ui/styles/layout-shell.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -185,7 +185,7 @@ body::after {
content: "";
position: absolute;
inset: -12px -18px;
background: radial-gradient(circle at 50% 70%, rgba(247, 243, 239, 0.92), rgba(247, 243, 239, 0));
background: radial-gradient(circle at 50% 70%, rgba(250, 250, 250, 0.92), rgba(250, 250, 250, 0));
filter: blur(2px);
pointer-events: none;
}
Expand Down
18 changes: 9 additions & 9 deletions web-ui/styles/navigation-panels.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,8 +6,8 @@
.main-tab-btn {
flex: 1;
text-align: center;
border: 1px solid rgba(216, 201, 184, 0.55);
background: rgba(255, 255, 255, 0.95);
border: 1px solid var(--color-border);
background: var(--color-surface-tint);
border-radius: var(--radius-lg);
padding: 12px 14px;
cursor: pointer;
Expand All @@ -26,9 +26,9 @@

.main-tab-btn.active {
border-color: var(--color-brand);
box-shadow: 0 10px 24px rgba(27, 23, 20, 0.08);
box-shadow: var(--shadow-card-hover);
color: var(--color-text-primary);
background: linear-gradient(135deg, rgba(201, 94, 75, 0.12), rgba(255, 255, 255, 0.95));
background: linear-gradient(135deg, var(--color-brand-light), var(--color-surface-tint));
}

.status-strip {
Expand All @@ -52,7 +52,7 @@

.lang-toggle-btn {
border: 1px solid var(--color-border);
background: rgba(255, 255, 255, 0.75);
background: var(--color-surface-tint);
border-radius: 10px;
padding: 10px 12px;
font-size: 12px;
Expand All @@ -63,7 +63,7 @@

.lang-toggle-btn:hover {
border-color: rgba(0, 0, 0, 0.22);
background: rgba(255, 255, 255, 0.95);
background: var(--color-surface);
}

.lang-toggle-btn.active {
Expand All @@ -77,7 +77,7 @@
max-width: 100%;
padding: 6px 10px;
border: 1px solid var(--color-border);
background: rgba(255, 253, 252, 0.82);
background: var(--color-surface-tint);
box-shadow: none;
display: inline-flex;
flex-direction: row;
Expand Down Expand Up @@ -111,7 +111,7 @@
padding: 10px 12px;
border-radius: 10px;
border: 1px solid var(--color-border);
background: rgba(255, 253, 252, 0.88);
background: var(--color-surface-tint);
box-shadow: none;
display: grid;
gap: 6px;
Expand Down Expand Up @@ -183,7 +183,7 @@
z-index: 12;
margin: 0 -28px 14px;
padding: 0 28px 12px;
background: linear-gradient(180deg, rgba(247, 243, 239, 0.96) 0%, rgba(247, 243, 239, 0.92) 78%, rgba(247, 243, 239, 0) 100%);
background: linear-gradient(180deg, var(--color-bg-topbar-strong) 0%, var(--color-bg-topbar-soft) 78%, var(--color-bg-topbar-clear) 100%);
backdrop-filter: blur(8px);
}

Expand Down
Loading