update
This commit is contained in:
36
renderer/themes/accents.css
Normal file
36
renderer/themes/accents.css
Normal file
@@ -0,0 +1,36 @@
|
||||
/**
|
||||
* accents.css — 5 套强调色覆盖
|
||||
* 通过 <html data-accent="..."> 切换
|
||||
*/
|
||||
|
||||
/* 默认（兜底）—— Linear Purple */
|
||||
:root,
|
||||
:root[data-accent="purple"] {
|
||||
--accent: #5E6AD2;
|
||||
--accent-soft: rgba(94, 106, 210, 0.12);
|
||||
--accent-hover: rgba(94, 106, 210, 0.20);
|
||||
}
|
||||
|
||||
:root[data-accent="blue"] {
|
||||
--accent: #3B82F6;
|
||||
--accent-soft: rgba(59, 130, 246, 0.12);
|
||||
--accent-hover: rgba(59, 130, 246, 0.20);
|
||||
}
|
||||
|
||||
:root[data-accent="green"] {
|
||||
--accent: #10B981;
|
||||
--accent-soft: rgba(16, 185, 129, 0.12);
|
||||
--accent-hover: rgba(16, 185, 129, 0.20);
|
||||
}
|
||||
|
||||
:root[data-accent="orange"] {
|
||||
--accent: #F59E0B;
|
||||
--accent-soft: rgba(245, 158, 11, 0.12);
|
||||
--accent-hover: rgba(245, 158, 11, 0.20);
|
||||
}
|
||||
|
||||
:root[data-accent="red"] {
|
||||
--accent: #EF4444;
|
||||
--accent-soft: rgba(239, 68, 68, 0.12);
|
||||
--accent-hover: rgba(239, 68, 68, 0.20);
|
||||
}
|
||||
30
renderer/themes/fonts.css
Normal file
30
renderer/themes/fonts.css
Normal file
@@ -0,0 +1,30 @@
|
||||
/**
|
||||
* fonts.css — Inter + JetBrains Mono 本地字体加载
|
||||
*/
|
||||
|
||||
@font-face {
|
||||
font-family: 'Inter';
|
||||
src: url('./fonts/Inter-Variable.woff2') format('woff2');
|
||||
font-weight: 100 900;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
@font-face {
|
||||
font-family: 'JetBrains Mono';
|
||||
src: url('./fonts/JetBrainsMono-Regular.woff2') format('woff2');
|
||||
font-weight: 400 700;
|
||||
font-style: normal;
|
||||
font-display: swap;
|
||||
}
|
||||
|
||||
/* 字体变量赋值
|
||||
* 中文优先：西文（Inter）排在中文兜底之后，App 里大部分文本是中文，
|
||||
* 让 YaHei/PingFang 先匹配笔画渲染，CJK 之外再走 Inter 拿更好的西文观感。 */
|
||||
:root {
|
||||
--font-ui: 'Inter', 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Segoe UI', system-ui, -apple-system,
|
||||
BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas',
|
||||
'Microsoft YaHei', monospace;
|
||||
}
|
||||
BIN
renderer/themes/fonts/Inter-Variable.woff2
Normal file
BIN
renderer/themes/fonts/Inter-Variable.woff2
Normal file
Binary file not shown.
BIN
renderer/themes/fonts/JetBrainsMono-Regular.woff2
Normal file
BIN
renderer/themes/fonts/JetBrainsMono-Regular.woff2
Normal file
Binary file not shown.
96
renderer/themes/themes.css
Normal file
96
renderer/themes/themes.css
Normal file
@@ -0,0 +1,96 @@
|
||||
/**
|
||||
* themes.css — 6 套主题的颜色定义
|
||||
* 通过 <html data-theme="..."> 切换
|
||||
*/
|
||||
|
||||
/* 默认（兜底）—— Linear Dark */
|
||||
:root,
|
||||
:root[data-theme="linear"] {
|
||||
--bg-base: #0E0E12;
|
||||
--bg-soft: #16161B;
|
||||
--bg-overlay: #1F1F26;
|
||||
--bg-hover: #22222A;
|
||||
--border: #2A2A33;
|
||||
--border-soft: #1E1E25;
|
||||
--border-strong: #3A3A45;
|
||||
--text: #ECECEF;
|
||||
--text-soft: #B4B4BC;
|
||||
--text-muted: #95959F;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
/* Midnight */
|
||||
:root[data-theme="midnight"] {
|
||||
--bg-base: #08090B;
|
||||
--bg-soft: #0F1013;
|
||||
--bg-overlay: #18191E;
|
||||
--bg-hover: #1C1D22;
|
||||
--border: #26272D;
|
||||
--border-soft: #1B1C20;
|
||||
--border-strong: #34353C;
|
||||
--text: #ECECEE;
|
||||
--text-soft: #ACADB2;
|
||||
--text-muted: #8E8F96;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.40);
|
||||
}
|
||||
|
||||
/* Carbon */
|
||||
:root[data-theme="carbon"] {
|
||||
--bg-base: #1A1D23;
|
||||
--bg-soft: #22262D;
|
||||
--bg-overlay: #2A2F37;
|
||||
--bg-hover: #2E333B;
|
||||
--border: #353A42;
|
||||
--border-soft: #252930;
|
||||
--border-strong: #42474F;
|
||||
--text: #DCDCDC;
|
||||
--text-soft: #9DA3AC;
|
||||
--text-muted: #8A929C;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.25);
|
||||
}
|
||||
|
||||
/* Solarized Dark —— 原本 muted 在 #002B36 上只有 ~3.7:1，对中文小字会"雾蒙蒙"，
|
||||
全部提亮一档让所有层级都达到 ≥5:1 的可读舒适线。 */
|
||||
:root[data-theme="solarized"] {
|
||||
--bg-base: #002B36;
|
||||
--bg-soft: #073642;
|
||||
--bg-overlay: #0A4554;
|
||||
--bg-hover: #0E5466;
|
||||
--border: #1F6779;
|
||||
--border-soft: #0A4554;
|
||||
--border-strong: #2680A5;
|
||||
--text: #B6CAD0;
|
||||
--text-soft: #9DB1B8;
|
||||
--text-muted: #88A0A8;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.35);
|
||||
}
|
||||
|
||||
/* GitHub Dark */
|
||||
:root[data-theme="github"] {
|
||||
--bg-base: #0D1117;
|
||||
--bg-soft: #161B22;
|
||||
--bg-overlay: #1F242C;
|
||||
--bg-hover: #22272E;
|
||||
--border: #30363D;
|
||||
--border-soft: #21262D;
|
||||
--border-strong: #444C56;
|
||||
--text: #DCE3EA;
|
||||
--text-soft: #9DA8B3;
|
||||
--text-muted: #8A95A0;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.30);
|
||||
}
|
||||
|
||||
/* Light Companion —— 把 muted 略压暗一档，避免浅底浅字反差不足。 */
|
||||
:root[data-theme="light"] {
|
||||
--bg-base: #FAFAFA;
|
||||
--bg-soft: #F4F4F5;
|
||||
--bg-overlay: #FFFFFF;
|
||||
--bg-hover: #ECECEE;
|
||||
--border: #E4E4E7;
|
||||
--border-soft: #F0F0F2;
|
||||
--border-strong: #D4D4D8;
|
||||
--text: #111827;
|
||||
--text-soft: #4B5563;
|
||||
--text-muted: #5C6573;
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.06);
|
||||
}
|
||||
71
renderer/themes/tokens.css
Normal file
71
renderer/themes/tokens.css
Normal file
@@ -0,0 +1,71 @@
|
||||
/**
|
||||
* tokens.css — 颜色/间距/字号/圆角/阴影/字体语义化变量
|
||||
* 仅定义变量，具体值由 themes.css 和 accents.css 提供。
|
||||
*/
|
||||
|
||||
:root {
|
||||
/* 背景层级（从底层到顶层） */
|
||||
--bg-base: #FFFFFF;
|
||||
--bg-soft: #F7F8FA;
|
||||
--bg-overlay: #FFFFFF;
|
||||
--bg-hover: #F3F4F6;
|
||||
|
||||
/* 边框 */
|
||||
--border: #E5E7EB;
|
||||
--border-soft: #F1F2F4;
|
||||
--border-strong: #D1D5DB;
|
||||
|
||||
/* 文字层级（muted 保持可读：对底色对比 ≥ 3:1，仅作 placeholder/辅助信息） */
|
||||
--text: #111827;
|
||||
--text-soft: #4B5563;
|
||||
--text-muted: #6B7280;
|
||||
|
||||
/* 强调色（被 accents.css 覆盖） */
|
||||
--accent: #5E6AD2;
|
||||
--accent-soft: rgba(94, 106, 210, 0.12);
|
||||
--accent-hover: rgba(94, 106, 210, 0.20);
|
||||
--accent-text: #FFFFFF;
|
||||
|
||||
/* 状态色 */
|
||||
--success: #10B981;
|
||||
--warn: #F59E0B;
|
||||
--warn-bg: rgba(245, 158, 11, 0.12);
|
||||
--danger: #EF4444;
|
||||
--danger-bg: rgba(239, 68, 68, 0.12);
|
||||
|
||||
/* 阴影 */
|
||||
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
|
||||
|
||||
/* 圆角 */
|
||||
--radius-sm: 6px;
|
||||
--radius-md: 10px;
|
||||
--radius-lg: 12px;
|
||||
|
||||
/* 字号（中文偏小容易糊，整体往上提一档；列表正文单独压一档避免占空间） */
|
||||
--fs-xs: 11px; /* 时间戳/角标：再小就糊 */
|
||||
--fs-sm: 12px; /* Tab/状态栏/设置副文字 */
|
||||
--fs-base: 13px; /* 列表正文：清晰度优先 */
|
||||
--fs-md: 14px; /* 标题/按钮/设置项 */
|
||||
--fs-lg: 16px; /* 「关于」大标题 */
|
||||
|
||||
/* 行高（中文需要更大行高才不会笔画粘连；1.6 是 Windows 上 CJK 舒适区） */
|
||||
--lh-base: 1.6;
|
||||
|
||||
/* 字间距（提一档让小字笔画清晰；0.02em 在 13px 以上会显得字间距过大，收到 0.01em） */
|
||||
--tracking-cn: 0.01em;
|
||||
|
||||
/* 字体（fonts.css 会覆盖这两个） */
|
||||
--font-ui: 'Microsoft YaHei UI', 'Microsoft YaHei', 'PingFang SC',
|
||||
'Hiragino Sans GB', 'Segoe UI', system-ui, -apple-system,
|
||||
BlinkMacSystemFont, sans-serif;
|
||||
--font-mono: 'JetBrains Mono', 'Cascadia Code', 'Consolas',
|
||||
'Microsoft YaHei', monospace;
|
||||
|
||||
/* 字重 */
|
||||
--fw-medium: 500;
|
||||
--fw-semibold: 600;
|
||||
|
||||
/* 动效 */
|
||||
--transition-fast: 100ms ease-out;
|
||||
--transition-base: 150ms ease-out;
|
||||
}
|
||||
Reference in New Issue
Block a user