diff --git a/src/components/Pagination.vue b/src/components/Pagination.vue index dc63ebd..e226807 100644 --- a/src/components/Pagination.vue +++ b/src/components/Pagination.vue @@ -43,7 +43,7 @@ function go(p: number) { } .page-btn:hover:not(:disabled) { - color: var(--ac-primary); + color: var(--ac-primary-ink); border-color: var(--ac-primary); } diff --git a/src/components/TagCloud.vue b/src/components/TagCloud.vue index e8a3526..1720eea 100644 --- a/src/components/TagCloud.vue +++ b/src/components/TagCloud.vue @@ -78,7 +78,7 @@ onMounted(load) .tag-item { border: none; background: var(--ac-primary-bg); - color: var(--ac-primary-strong); + color: var(--ac-primary-ink); border-radius: var(--song-radius-m); cursor: pointer; font-size: 13px; diff --git a/src/styles/song-theme.css b/src/styles/song-theme.css index bfe1a57..53e9ac3 100644 --- a/src/styles/song-theme.css +++ b/src/styles/song-theme.css @@ -23,6 +23,12 @@ --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); @@ -78,6 +84,11 @@ --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); @@ -107,13 +118,17 @@ --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); @@ -166,7 +181,7 @@ body { } a { - color: var(--ac-primary); + color: var(--ac-primary-ink); text-decoration: none; } a:hover { diff --git a/src/views/admin/ArticleEditorView.vue b/src/views/admin/ArticleEditorView.vue index 9e57dc6..2702b0b 100644 --- a/src/views/admin/ArticleEditorView.vue +++ b/src/views/admin/ArticleEditorView.vue @@ -281,7 +281,7 @@ onMounted(() => { flex-shrink: 0; padding: 10px 16px; background: var(--ac-primary-bg); - color: var(--ac-primary-strong); + color: var(--ac-primary-ink); border-radius: var(--song-radius-l); cursor: pointer; font-size: 14px; @@ -355,7 +355,7 @@ onMounted(() => { .btn-plain:hover { border-color: var(--ac-primary); - color: var(--ac-primary); + color: var(--ac-primary-ink); } .error-text { diff --git a/src/views/admin/ArticleListView.vue b/src/views/admin/ArticleListView.vue index 8044252..9d28f49 100644 --- a/src/views/admin/ArticleListView.vue +++ b/src/views/admin/ArticleListView.vue @@ -139,7 +139,7 @@ onMounted(load)