You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
223 lines
5.9 KiB
223 lines
5.9 KiB
/* SongUI · 檐下 — 设计契约实现
|
|
* 参照 frontendui/SongUI研究报告.md §2-§9 与 src/styles/tokens/{light,dark}.css
|
|
* :attr=light 天青昼 / :attr=dark 黛墨夜
|
|
*/
|
|
|
|
:root,
|
|
:root[data-theme='light'] {
|
|
color-scheme: light;
|
|
--song-bg: #f7f4ec;
|
|
--song-bg-elevated: #fffdf8;
|
|
--song-surface-3: #ece6d8;
|
|
|
|
--song-text: #3a4a52;
|
|
--song-text-secondary: #5a6b74;
|
|
--song-text-disabled: #7e8f98;
|
|
|
|
--song-primary: #4f78b8;
|
|
--song-primary-bg: #e7eef9;
|
|
--song-success: #4e7a45;
|
|
--song-success-bg: #e9f0e4;
|
|
--song-warning: #8f7a1e;
|
|
--song-warning-bg: #f6f1df;
|
|
--song-danger: #a84635;
|
|
--song-danger-bg: #f6e9e2;
|
|
|
|
/* 语义文字墨（置于 -bg 上满足 WCAG AA ≥4.5:1，"色相不可换，明度可校准"） */
|
|
--song-primary-ink: #34537e;
|
|
--song-success-ink: #3d5c37;
|
|
--song-warning-ink: #6f5c0f;
|
|
--song-danger-ink: #a84635;
|
|
|
|
--song-border: rgba(58, 74, 82, 0.14);
|
|
--song-border-strong: rgba(58, 74, 82, 0.28);
|
|
--song-hover: rgba(79, 120, 184, 0.08);
|
|
--song-active: rgba(79, 120, 184, 0.14);
|
|
|
|
--song-btn-bg: #4f78b8;
|
|
--song-btn-text: #fff;
|
|
|
|
--song-seal: #a84635;
|
|
|
|
--song-shadow-1: 0 1px 2px rgba(20, 24, 27, 0.06);
|
|
--song-shadow-2: 0 2px 8px rgba(20, 24, 27, 0.08);
|
|
--song-shadow-3: 0 8px 24px rgba(20, 24, 27, 0.12);
|
|
|
|
--song-font-display: 'LXGW WenKai', 'Noto Serif SC', 'Songti SC', serif;
|
|
--song-font-serif: 'Noto Serif SC', 'Songti SC', serif;
|
|
--song-font-sans: 'Noto Sans SC', -apple-system, 'PingFang SC', 'Microsoft YaHei', system-ui, sans-serif;
|
|
--song-font-body: var(--song-font-sans);
|
|
|
|
--song-radius-s: 2px;
|
|
--song-radius-m: 4px;
|
|
--song-radius-l: 6px;
|
|
|
|
--song-space-1: 4px;
|
|
--song-space-2: 8px;
|
|
--song-space-3: 12px;
|
|
--song-space-4: 16px;
|
|
--song-space-5: 24px;
|
|
--song-space-6: 32px;
|
|
--song-space-8: 64px;
|
|
|
|
--song-ease: cubic-bezier(0.33, 1, 0.68, 1);
|
|
--song-dur-1: 200ms;
|
|
--song-dur-2: 320ms;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
color-scheme: dark;
|
|
--song-bg: #14181b;
|
|
--song-bg-elevated: #1d2326;
|
|
--song-surface-3: #232b2f;
|
|
|
|
--song-text: #e6ecef;
|
|
--song-text-secondary: #a9b6be;
|
|
--song-text-disabled: #5e6a71;
|
|
|
|
--song-primary: #9dbeee;
|
|
--song-primary-bg: rgba(113, 150, 203, 0.16);
|
|
--song-success: #94b989;
|
|
--song-success-bg: rgba(148, 185, 137, 0.14);
|
|
--song-warning: #d3bc6a;
|
|
--song-warning-bg: rgba(211, 188, 106, 0.14);
|
|
--song-danger: #d08a79;
|
|
--song-danger-bg: rgba(208, 138, 121, 0.14);
|
|
|
|
--song-primary-ink: #9dbeee;
|
|
--song-success-ink: #94b989;
|
|
--song-warning-ink: #d3bc6a;
|
|
--song-danger-ink: #d08a79;
|
|
|
|
--song-border: rgba(230, 236, 239, 0.12);
|
|
--song-border-strong: rgba(230, 236, 239, 0.26);
|
|
--song-hover: rgba(157, 190, 238, 0.1);
|
|
--song-active: rgba(157, 190, 238, 0.16);
|
|
|
|
--song-btn-bg: #48689e;
|
|
--song-btn-text: #fff;
|
|
|
|
--song-seal: #c76a4f;
|
|
|
|
--song-shadow-1: 0 1px 2px rgba(0, 0, 0, 0.3);
|
|
--song-shadow-2: 0 2px 8px rgba(0, 0, 0, 0.35);
|
|
--song-shadow-3: 0 8px 24px rgba(0, 0, 0, 0.45);
|
|
}
|
|
|
|
/* ── 应用语义别名（两主题自适应） ───────────────────────────── */
|
|
:root {
|
|
--ac-bg: var(--song-bg);
|
|
--ac-bg-card: var(--song-bg-elevated);
|
|
--ac-surface: var(--song-surface-3);
|
|
|
|
--ac-text: var(--song-text);
|
|
--ac-text-secondary: var(--song-text-secondary);
|
|
--ac-text-disabled: var(--song-text-disabled);
|
|
|
|
--ac-primary: var(--song-primary);
|
|
--ac-primary-strong: var(--song-btn-bg);
|
|
--ac-primary-text: var(--song-btn-text);
|
|
--ac-primary-bg: var(--song-primary-bg);
|
|
--ac-primary-ink: var(--song-primary-ink);
|
|
|
|
--ac-success: var(--song-success);
|
|
--ac-success-bg: var(--song-success-bg);
|
|
--ac-success-ink: var(--song-success-ink);
|
|
--ac-warning: var(--song-warning);
|
|
--ac-warning-bg: var(--song-warning-bg);
|
|
--ac-warning-ink: var(--song-warning-ink);
|
|
--ac-danger: var(--song-danger);
|
|
--ac-danger-bg: var(--song-danger-bg);
|
|
--ac-danger-ink: var(--song-danger-ink);
|
|
|
|
--ac-border: var(--song-border);
|
|
--ac-border-strong: var(--song-border-strong);
|
|
--ac-input-border: var(--song-border-strong);
|
|
--ac-hover: var(--song-hover);
|
|
--ac-active: var(--song-active);
|
|
|
|
--ac-shadow-1: var(--song-shadow-1);
|
|
--ac-shadow-2: var(--song-shadow-2);
|
|
--ac-shadow-3: var(--song-shadow-3);
|
|
|
|
--ac-radius-s: 2px;
|
|
--ac-radius-m: 4px;
|
|
--ac-radius-l: 6px;
|
|
|
|
--ac-header-bg: #232d34;
|
|
--ac-header-text: #eef2f4;
|
|
--ac-header-muted: #a9b6be;
|
|
--ac-header-active-bg: #31404a;
|
|
}
|
|
|
|
:root[data-theme='dark'] {
|
|
--ac-header-bg: var(--song-bg-elevated);
|
|
--ac-header-text: var(--song-text);
|
|
--ac-header-muted: var(--song-text-secondary);
|
|
--ac-header-active-bg: var(--song-hover);
|
|
}
|
|
|
|
/* ── 基础 §3 ──────────────────────────────────────────────── */
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
box-sizing: border-box;
|
|
}
|
|
|
|
html,
|
|
body {
|
|
margin: 0;
|
|
padding: 0;
|
|
}
|
|
|
|
body {
|
|
background: var(--song-bg);
|
|
color: var(--song-text);
|
|
font-family: var(--song-font-body);
|
|
font-size: 14px;
|
|
line-height: 22px;
|
|
-webkit-font-smoothing: antialiased;
|
|
transition: background-color var(--song-dur-2) var(--song-ease), color var(--song-dur-2) var(--song-ease);
|
|
}
|
|
|
|
a {
|
|
color: var(--ac-primary-ink);
|
|
text-decoration: none;
|
|
}
|
|
a:hover {
|
|
text-decoration: underline;
|
|
}
|
|
|
|
/* 焦点态 §9 — 主色 2px 轮廓 */
|
|
:focus-visible {
|
|
outline: 2px solid var(--song-primary);
|
|
outline-offset: 2px;
|
|
border-radius: var(--song-radius-s);
|
|
}
|
|
|
|
/* 数字等宽 */
|
|
.tnum {
|
|
font-variant-numeric: tabular-nums;
|
|
}
|
|
|
|
/* 页面转场 — 雾隐淡入 §7 */
|
|
.page-enter-active,
|
|
.page-leave-active {
|
|
transition: opacity var(--song-dur-2) var(--song-ease), transform var(--song-dur-2) var(--song-ease);
|
|
}
|
|
.page-enter-from,
|
|
.page-leave-to {
|
|
opacity: 0;
|
|
transform: translateY(8px);
|
|
}
|
|
|
|
/* 动效可关 §7 */
|
|
@media (prefers-reduced-motion: reduce) {
|
|
*,
|
|
*::before,
|
|
*::after {
|
|
animation-duration: 0.01ms !important;
|
|
animation-iteration-count: 1 !important;
|
|
transition-duration: 0.01ms !important;
|
|
}
|
|
}
|