Browse Source

fix(ui): raise tag/badge/link text contrast to WCAG AA via ink tokens

main
Mohan 1 month ago
parent
commit
3d6783511c
  1. 2
      src/components/Pagination.vue
  2. 2
      src/components/TagCloud.vue
  3. 17
      src/styles/song-theme.css
  4. 4
      src/views/admin/ArticleEditorView.vue
  5. 17
      src/views/admin/ArticleListView.vue
  6. 10
      src/views/admin/CommentReviewView.vue
  7. 14
      src/views/admin/UserListView.vue

2
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);
}

2
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;

17
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 {

4
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 {

17
src/views/admin/ArticleListView.vue

@ -139,7 +139,7 @@ onMounted(load)
</thead>
<tbody>
<tr v-for="article in articles" :key="article.id">
<td>{{ article.title }}</td>
<td class="title-cell">{{ article.title }}</td>
<td>
<span
class="status-badge"
@ -227,6 +227,11 @@ onMounted(load)
color: var(--ac-text-secondary);
}
.title-cell {
font-family: 'Noto Serif SC', 'SimSun', 'STSong', serif;
font-weight: 600;
}
.status-badge {
padding: 2px 10px;
border-radius: var(--song-radius-m);
@ -235,17 +240,17 @@ onMounted(load)
.status-badge.draft {
background: var(--ac-surface);
color: var(--ac-text-secondary);
color: var(--ac-text);
}
.status-badge.published {
background: var(--ac-success-bg);
color: var(--ac-success);
color: var(--ac-success-ink);
}
.status-badge.archived {
background: var(--ac-warning-bg);
color: var(--ac-warning);
color: var(--ac-warning-ink);
}
.actions {
@ -256,14 +261,14 @@ onMounted(load)
.btn-link {
border: none;
background: none;
color: var(--ac-primary);
color: var(--ac-primary-ink);
cursor: pointer;
font-size: 13px;
padding: 0;
}
.btn-link.danger {
color: var(--ac-danger);
color: var(--ac-danger-ink);
}
.error-text {

10
src/views/admin/CommentReviewView.vue

@ -217,17 +217,17 @@ onMounted(load)
.status-badge.pending {
background: var(--ac-warning-bg);
color: var(--ac-warning);
color: var(--ac-warning-ink);
}
.status-badge.approved {
background: var(--ac-success-bg);
color: var(--ac-success);
color: var(--ac-success-ink);
}
.status-badge.rejected {
background: var(--ac-danger-bg);
color: var(--ac-danger);
color: var(--ac-danger-ink);
}
.actions {
@ -239,14 +239,14 @@ onMounted(load)
.btn-link {
border: none;
background: none;
color: var(--ac-primary);
color: var(--ac-primary-ink);
cursor: pointer;
font-size: 13px;
padding: 0;
}
.btn-link.danger {
color: var(--ac-danger);
color: var(--ac-danger-ink);
}
.total-hint {

14
src/views/admin/UserListView.vue

@ -195,17 +195,17 @@ onMounted(load)
.role-badge.admin {
background: var(--ac-danger-bg);
color: var(--ac-danger);
color: var(--ac-danger-ink);
}
.role-badge.editor {
background: var(--ac-primary-bg);
color: var(--ac-primary-strong);
color: var(--ac-primary-ink);
}
.role-badge.visitor {
background: var(--ac-surface);
color: var(--ac-text-secondary);
color: var(--ac-text);
}
.role-select {
@ -230,12 +230,12 @@ onMounted(load)
.status-badge.enabled {
background: var(--ac-success-bg);
color: var(--ac-success);
color: var(--ac-success-ink);
}
.status-badge.disabled {
background: var(--ac-surface);
color: var(--ac-text-secondary);
color: var(--ac-text);
}
.total-hint {
@ -252,11 +252,11 @@ onMounted(load)
}
.btn-link.danger {
color: var(--ac-danger);
color: var(--ac-danger-ink);
}
.btn-link.safe {
color: var(--ac-success);
color: var(--ac-success-ink);
}
.btn-link:disabled {

Loading…
Cancel
Save