From 4c9a637507fb0abbf7b98c2ad47a413b020c8422 Mon Sep 17 00:00:00 2001 From: Bryan Van Deusen Date: Fri, 31 Jul 2026 22:40:58 -0400 Subject: [PATCH] =?UTF-8?q?fix(theme):=20text=20on=20a=20filled=20colour?= =?UTF-8?q?=20needs=20its=20own=20token=20=E2=80=94=20the=20old=20one=20in?= =?UTF-8?q?verts?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 76 hardcoded `color: #fff` now resolve to --fs-text-on-action, a new token that is parchment in BOTH modes. The design system said they should supersede to --fs-text-primary, on the recorded reasoning that "there is no 'text on action' colour, there is just the text colour." That is true on dark and wrong on light. --fs-text-primary inverts to #14171A; the surfaces underneath it do not invert at all — every one of these 76 sits on an action colour, a semantic colour, the accent, or the CTA gradient, all of which hold a single value across modes. Sweeping as recorded would have put obsidian text on moss green: roughly 2.4:1, against a house style whose stated floor is WCAG AA. It would have looked correct to me, because I checked it in the mode where it was correct. --color-accent-fg had the same defect independently and is repointed too. The token check now reports zero superseded literals, down from 30 files, and raw colour literals drop 246 -> 169. Closes #2275. Co-Authored-By: Claude Opus 5 (1M context) Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs --- frontend/src/App.vue | 2 +- frontend/src/assets/editor-shared.css | 16 +++++++------- frontend/src/assets/theme.css | 14 +++++++----- frontend/src/components/HistoryPanel.vue | 2 +- frontend/src/components/InlineAssistPanel.vue | 2 +- frontend/src/components/NotificationBell.vue | 2 +- frontend/src/components/PaginationBar.vue | 2 +- frontend/src/components/ShareDialog.vue | 4 ++-- frontend/src/components/SystemsSection.vue | 6 ++--- frontend/src/components/TaskLogSection.vue | 4 ++-- frontend/src/components/ToastNotification.vue | 4 ++-- .../src/components/VersionHistorySection.vue | 2 +- .../src/components/WorkspaceNoteEditor.vue | 6 ++--- .../src/components/WorkspaceTaskPanel.vue | 4 ++-- frontend/src/views/DesignSystemsView.vue | 7 +----- frontend/src/views/ForgotPasswordView.vue | 2 +- frontend/src/views/KnowledgeView.vue | 2 +- frontend/src/views/LoginView.vue | 2 +- frontend/src/views/NoteEditorView.vue | 2 +- frontend/src/views/NoteViewerView.vue | 8 +++---- frontend/src/views/ProjectListView.vue | 6 ++--- frontend/src/views/ProjectView.vue | 22 +++++++++---------- frontend/src/views/RegisterInviteView.vue | 2 +- frontend/src/views/RegisterView.vue | 2 +- frontend/src/views/ResetPasswordView.vue | 2 +- frontend/src/views/SettingsView.vue | 20 ++++++++--------- frontend/src/views/SnippetDetailView.vue | 2 +- frontend/src/views/SnippetEditorView.vue | 2 +- frontend/src/views/SnippetListView.vue | 6 ++--- frontend/src/views/TaskEditorView.vue | 2 +- frontend/src/views/TaskViewerView.vue | 8 +++---- frontend/src/views/UserManagementView.vue | 6 ++--- 32 files changed, 86 insertions(+), 87 deletions(-) diff --git a/frontend/src/App.vue b/frontend/src/App.vue index d84293e..25b887f 100644 --- a/frontend/src/App.vue +++ b/frontend/src/App.vue @@ -255,7 +255,7 @@ onUnmounted(() => { z-index: 9999; padding: 0.4rem 0.75rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border-radius: 0 0 4px 4px; font-size: 0.875rem; text-decoration: none; diff --git a/frontend/src/assets/editor-shared.css b/frontend/src/assets/editor-shared.css index bfff033..dcd044a 100644 --- a/frontend/src/assets/editor-shared.css +++ b/frontend/src/assets/editor-shared.css @@ -56,7 +56,7 @@ .btn-save { padding: 0.45rem 1.1rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -76,7 +76,7 @@ .btn-delete { padding: 0.45rem 1rem; background: var(--color-action-destructive); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -187,12 +187,12 @@ } .tag-pill:hover:not(:disabled) { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); } .tag-pill.applied { background: var(--color-success, #2ecc71); border-color: var(--color-success, #2ecc71); - color: #fff; + color: var(--fs-text-on-action); cursor: default; } .tag-check { @@ -345,7 +345,7 @@ .btn-generate { padding: 0.4rem 0.9rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -478,7 +478,7 @@ .btn-accept { padding: 0.4rem 1rem; background: var(--color-success); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -537,7 +537,7 @@ } .modal-btn-danger { background: var(--color-danger); - color: #fff; + color: var(--fs-text-on-action); border-color: var(--color-danger); } @@ -548,7 +548,7 @@ transform: translateX(-50%); padding: 0.3rem 0.75rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/assets/theme.css b/frontend/src/assets/theme.css index 0484367..2b65328 100644 --- a/frontend/src/assets/theme.css +++ b/frontend/src/assets/theme.css @@ -132,9 +132,10 @@ --fs-table-stripe: color-mix(in srgb, var(--fs-text-primary) 3%, transparent); /* text */ - --fs-text-primary: #E8E4D8; /* also the text colour on filled action buttons */ + --fs-text-primary: #E8E4D8; /* body, headings, labels — inverts by mode */ --fs-text-secondary: #C2BFB4; --fs-text-tertiary: #9C9A92; + --fs-text-on-action: #E8E4D8; /* text on a filled colour — NOT mode-dependent */ /* type */ --fs-size-display: 40px; @@ -179,9 +180,9 @@ } /* SUPERSEDES — write the token, not the literal. - * #fff -> --fs-text-primary - * #ffffff -> --fs-text-primary - * white -> --fs-text-primary + * #fff -> --fs-text-on-action + * #ffffff -> --fs-text-on-action + * white -> --fs-text-on-action * bold -> --fs-weight-medium * bolder -> --fs-weight-medium */ @@ -290,7 +291,10 @@ visual shifts exactly where a fallback had drifted; that shift IS the fix. ------------------------------------------------------------------ */ --color-accent: var(--fs-accent); - --color-accent-fg: var(--fs-text-primary); + /* Foreground ON the accent, so it follows the accent's mode-independence, + not the page text's. Pointing this at --fs-text-primary made it invert to + obsidian on light — over a mid-tone accent, well under the AA floor. */ + --color-accent-fg: var(--fs-text-on-action); --color-hover: var(--fs-surface-hover); --color-bg-hover: var(--fs-surface-hover); --color-bg-tertiary: var(--fs-surface-hover); diff --git a/frontend/src/components/HistoryPanel.vue b/frontend/src/components/HistoryPanel.vue index 5e4cd21..c91a9c8 100644 --- a/frontend/src/components/HistoryPanel.vue +++ b/frontend/src/components/HistoryPanel.vue @@ -396,7 +396,7 @@ onMounted(loadVersions); .btn-restore { padding: 0.45rem 1rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/components/InlineAssistPanel.vue b/frontend/src/components/InlineAssistPanel.vue index 4fcaffc..28a7340 100644 --- a/frontend/src/components/InlineAssistPanel.vue +++ b/frontend/src/components/InlineAssistPanel.vue @@ -192,7 +192,7 @@ const markers: Record = { } .iap-btn-accept { background: var(--color-success, #22c55e); - color: #fff; + color: var(--fs-text-on-action); } .iap-btn-accept:hover { opacity: 0.85; } diff --git a/frontend/src/components/NotificationBell.vue b/frontend/src/components/NotificationBell.vue index 7f4f25d..d24c659 100644 --- a/frontend/src/components/NotificationBell.vue +++ b/frontend/src/components/NotificationBell.vue @@ -82,7 +82,7 @@ onUnmounted(() => { top: -5px; right: -5px; background: var(--color-danger, #ef4444); - color: #fff; + color: var(--fs-text-on-action); font-size: 0.6rem; font-weight: 700; min-width: 16px; diff --git a/frontend/src/components/PaginationBar.vue b/frontend/src/components/PaginationBar.vue index 05145d9..f55f702 100644 --- a/frontend/src/components/PaginationBar.vue +++ b/frontend/src/components/PaginationBar.vue @@ -90,7 +90,7 @@ function goToPage(page: number) { } .page-btn.active { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border-color: var(--color-primary); } .ellipsis { diff --git a/frontend/src/components/ShareDialog.vue b/frontend/src/components/ShareDialog.vue index 305f8b9..f68d8b8 100644 --- a/frontend/src/components/ShareDialog.vue +++ b/frontend/src/components/ShareDialog.vue @@ -268,7 +268,7 @@ onMounted(async () => { .share-tab.active { background: var(--color-primary); border-color: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); } .share-target-form { @@ -339,7 +339,7 @@ onMounted(async () => { .btn-add-share { padding: 0.45rem 1rem; background: var(--gradient-cta); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: 6px; font-size: 0.85rem; diff --git a/frontend/src/components/SystemsSection.vue b/frontend/src/components/SystemsSection.vue index 46ebb2a..cb9d63c 100644 --- a/frontend/src/components/SystemsSection.vue +++ b/frontend/src/components/SystemsSection.vue @@ -390,7 +390,7 @@ async function confirmDelete() { .btn-confirm { padding: 0.35rem 0.8rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -405,7 +405,7 @@ async function confirmDelete() { padding: 0.35rem 0.8rem; background: var(--color-action-secondary); border: none; - color: #fff; + color: var(--fs-text-on-action); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.82rem; @@ -555,6 +555,6 @@ async function confirmDelete() { font-family: inherit; } .modal-btn:hover { background: var(--color-bg); } -.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: #fff; } +.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--fs-text-on-action); } .modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); } diff --git a/frontend/src/components/TaskLogSection.vue b/frontend/src/components/TaskLogSection.vue index a0eed59..3f734e0 100644 --- a/frontend/src/components/TaskLogSection.vue +++ b/frontend/src/components/TaskLogSection.vue @@ -217,7 +217,7 @@ onMounted(loadLogs); .log-duration-badge { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border-radius: 99px; padding: 0.1rem 0.5rem; font-size: 0.72rem; @@ -312,7 +312,7 @@ onMounted(loadLogs); margin-left: auto; padding: 0.3rem 0.75rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/components/ToastNotification.vue b/frontend/src/components/ToastNotification.vue index 341cd05..b82e02b 100644 --- a/frontend/src/components/ToastNotification.vue +++ b/frontend/src/components/ToastNotification.vue @@ -36,7 +36,7 @@ const toastStore = useToastStore(); gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 6px; - color: #fff; + color: var(--fs-text-on-action); font-size: 0.9rem; box-shadow: 0 2px 8px var(--color-shadow); min-width: 200px; @@ -54,7 +54,7 @@ const toastStore = useToastStore(); padding: 0 0.15rem; } .toast-close:hover { - color: #fff; + color: var(--fs-text-on-action); } .toast--success { background: var(--color-toast-success); diff --git a/frontend/src/components/VersionHistorySection.vue b/frontend/src/components/VersionHistorySection.vue index 1faf4fd..6113d25 100644 --- a/frontend/src/components/VersionHistorySection.vue +++ b/frontend/src/components/VersionHistorySection.vue @@ -241,7 +241,7 @@ function restore() { border-radius: var(--radius-sm); padding: 0.25rem 0.6rem; font-size: 0.78rem; - color: #fff; + color: var(--fs-text-on-action); cursor: pointer; font-family: inherit; } diff --git a/frontend/src/components/WorkspaceNoteEditor.vue b/frontend/src/components/WorkspaceNoteEditor.vue index 5ad88f5..975c71e 100644 --- a/frontend/src/components/WorkspaceNoteEditor.vue +++ b/frontend/src/components/WorkspaceNoteEditor.vue @@ -643,7 +643,7 @@ defineExpose({ reload: loadProjectNotes }); border-radius: 3px; transition: background 0.15s, color 0.15s; } -.btn-confirm-delete:hover:not(:disabled) { background: var(--color-action-destructive); color: #fff; } +.btn-confirm-delete:hover:not(:disabled) { background: var(--color-action-destructive); color: var(--fs-text-on-action); } .btn-confirm-delete:disabled { opacity: 0.5; cursor: default; } .btn-cancel-delete { @@ -671,7 +671,7 @@ defineExpose({ reload: loadProjectNotes }); .btn-confirm { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: 4px; padding: 0.15rem 0.35rem; @@ -733,7 +733,7 @@ defineExpose({ reload: loadProjectNotes }); /* Moss action-primary per Hybrid */ .btn-save { background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: 5px; padding: 0.25rem 0.7rem; diff --git a/frontend/src/components/WorkspaceTaskPanel.vue b/frontend/src/components/WorkspaceTaskPanel.vue index 8634ee8..9504478 100644 --- a/frontend/src/components/WorkspaceTaskPanel.vue +++ b/frontend/src/components/WorkspaceTaskPanel.vue @@ -398,7 +398,7 @@ defineExpose({ reload: loadAll }); .btn-add { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: 5px; padding: 0.28rem 0.55rem; @@ -590,7 +590,7 @@ defineExpose({ reload: loadAll }); margin-left: 0.25rem; transition: background 0.15s, color 0.15s; } -.btn-delete-confirm:hover:not(:disabled) { background: var(--color-action-destructive); color: #fff; } +.btn-delete-confirm:hover:not(:disabled) { background: var(--color-action-destructive); color: var(--fs-text-on-action); } .btn-delete-confirm:disabled { opacity: 0.5; cursor: default; } .btn-delete-cancel { diff --git a/frontend/src/views/DesignSystemsView.vue b/frontend/src/views/DesignSystemsView.vue index a11b09f..76fd9f8 100644 --- a/frontend/src/views/DesignSystemsView.vue +++ b/frontend/src/views/DesignSystemsView.vue @@ -1273,14 +1273,9 @@ textarea.input { border: 1px solid transparent; } -/* Background matches the house convention (--color-action-primary, as in - ProjectListView and four others). The text colour deliberately does NOT: - every existing copy uses `color: #fff`, which is 67 live violations of the - rule that pure white is never text (#2275). Parchment is what the rulebook - actually specifies. */ .btn-primary { background: var(--color-action-primary); - color: #E8E4D8; + color: var(--fs-text-on-action); } .btn-primary:not(:disabled):hover { diff --git a/frontend/src/views/ForgotPasswordView.vue b/frontend/src/views/ForgotPasswordView.vue index 2a69590..e274c38 100644 --- a/frontend/src/views/ForgotPasswordView.vue +++ b/frontend/src/views/ForgotPasswordView.vue @@ -141,7 +141,7 @@ async function handleSubmit() { width: 100%; padding: 0.6rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/KnowledgeView.vue b/frontend/src/views/KnowledgeView.vue index 7d5d54d..11b37aa 100644 --- a/frontend/src/views/KnowledgeView.vue +++ b/frontend/src/views/KnowledgeView.vue @@ -574,7 +574,7 @@ onUnmounted(() => { border-radius: 10px; border: none; background: var(--gradient-cta); - color: #fff; + color: var(--fs-text-on-action); cursor: pointer; font-size: 0.85rem; font-weight: 500; diff --git a/frontend/src/views/LoginView.vue b/frontend/src/views/LoginView.vue index 0b06bba..4098d42 100644 --- a/frontend/src/views/LoginView.vue +++ b/frontend/src/views/LoginView.vue @@ -180,7 +180,7 @@ function loginWithOAuth() { width: 100%; padding: 0.6rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/NoteEditorView.vue b/frontend/src/views/NoteEditorView.vue index f439afa..8dd5890 100644 --- a/frontend/src/views/NoteEditorView.vue +++ b/frontend/src/views/NoteEditorView.vue @@ -748,7 +748,7 @@ onUnmounted(() => assist.clearSelection()); cursor: pointer; font-family: inherit; } -.btn-link-all:hover { background: var(--color-primary); color: #fff; } +.btn-link-all:hover { background: var(--color-primary); color: var(--fs-text-on-action); } .link-suggest-list { display: flex; diff --git a/frontend/src/views/NoteViewerView.vue b/frontend/src/views/NoteViewerView.vue index ab9e47f..f12200d 100644 --- a/frontend/src/views/NoteViewerView.vue +++ b/frontend/src/views/NoteViewerView.vue @@ -354,7 +354,7 @@ async function convertToTask() { border: none; border-radius: var(--radius-sm); background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); text-decoration: none; cursor: pointer; font-size: 0.875rem; @@ -363,14 +363,14 @@ async function convertToTask() { } .btn-edit:hover { background: var(--color-action-primary-hover); - color: #fff; + color: var(--fs-text-on-action); } /* Convert + Share: Bronze action-secondary — alternate paths */ .btn-convert { margin-left: auto; padding: 0.3rem 0.75rem; background: var(--color-action-secondary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -388,7 +388,7 @@ async function convertToTask() { background: var(--color-action-secondary); border: none; border-radius: var(--radius-sm); - color: #fff; + color: var(--fs-text-on-action); cursor: pointer; font-size: 0.85rem; font-family: inherit; diff --git a/frontend/src/views/ProjectListView.vue b/frontend/src/views/ProjectListView.vue index 4c38dfe..f4f3d8a 100644 --- a/frontend/src/views/ProjectListView.vue +++ b/frontend/src/views/ProjectListView.vue @@ -287,7 +287,7 @@ function overallPct(project: Project): { total: number; pct: number } { .btn-primary { padding: 0.45rem 1rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -341,7 +341,7 @@ function overallPct(project: Project): { total: number; pct: number } { .empty-title { font-size: 1rem; font-weight: 500; color: var(--color-text-secondary); margin: 0 0 0.35rem; } .empty-sub { font-size: 0.85rem; margin: 0 0 1rem; } .empty-action { display: inline-block; padding: 0.4rem 1rem; border: 1px solid var(--color-primary); border-radius: var(--radius-sm); color: var(--color-primary); background: none; cursor: pointer; font-size: 0.85rem; transition: background 0.15s, color 0.15s; } -.empty-action:hover { background: var(--color-primary); color: #fff; } +.empty-action:hover { background: var(--color-primary); color: var(--fs-text-on-action); } .skeleton-card { height: 140px; @@ -594,7 +594,7 @@ function overallPct(project: Project): { total: number; pct: number } { .modal-btn-primary { background: var(--color-primary); border-color: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); } .modal-btn-primary:hover:not(:disabled) { opacity: 0.9; diff --git a/frontend/src/views/ProjectView.vue b/frontend/src/views/ProjectView.vue index 14aeca2..9785df1 100644 --- a/frontend/src/views/ProjectView.vue +++ b/frontend/src/views/ProjectView.vue @@ -879,7 +879,7 @@ async function confirmDelete() { gap: 0.35rem; padding: 0.45rem 1rem; background: var(--gradient-cta); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); font-size: 0.875rem; @@ -888,14 +888,14 @@ async function confirmDelete() { box-shadow: var(--glow-cta); transition: box-shadow 0.15s, opacity 0.15s; } -.btn-workspace:hover { box-shadow: var(--glow-cta-hover); opacity: 0.95; color: #fff; } +.btn-workspace:hover { box-shadow: var(--glow-cta-hover); opacity: 0.95; color: var(--fs-text-on-action); } /* Share: Bronze action-secondary — alternate path */ .btn-share { padding: 0.4rem 0.8rem; background: var(--color-action-secondary); border: none; - color: #fff; + color: var(--fs-text-on-action); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; @@ -917,7 +917,7 @@ async function confirmDelete() { font-family: inherit; transition: background 0.15s, color 0.15s; } -.btn-danger-outline:hover { background: var(--color-action-destructive); color: #fff; } +.btn-danger-outline:hover { background: var(--color-action-destructive); color: var(--fs-text-on-action); } .error-msg { color: var(--color-danger); font-size: 0.9rem; } @@ -1065,7 +1065,7 @@ async function confirmDelete() { .btn-save-panel { padding: 0.45rem 0.9rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -1151,7 +1151,7 @@ async function confirmDelete() { .btn-ms-confirm { padding: 0.3rem 0.65rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -1165,7 +1165,7 @@ async function confirmDelete() { padding: 0.3rem 0.65rem; background: var(--color-action-secondary); border: none; - color: #fff; + color: var(--fs-text-on-action); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.78rem; @@ -1224,7 +1224,7 @@ async function confirmDelete() { cursor: pointer; border: 1px solid var(--color-border); } -.ms-plan-actions .btn-primary { background: var(--color-primary); color: #fff; border-color: var(--color-primary); } +.ms-plan-actions .btn-primary { background: var(--color-primary); color: var(--fs-text-on-action); border-color: var(--color-primary); } .ms-plan-actions .btn-primary:disabled { opacity: 0.6; cursor: default; } .ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); } @@ -1393,8 +1393,8 @@ async function confirmDelete() { line-height: 1; } .task-card:hover .task-advance-btn { opacity: 1; } -.task-advance-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: #fff; } -.task-advance-btn--done:hover { background: var(--color-success, #22c55e); border-color: var(--color-success, #22c55e); color: #fff; } +.task-advance-btn:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--fs-text-on-action); } +.task-advance-btn--done:hover { background: var(--color-success, #22c55e); border-color: var(--color-success, #22c55e); color: var(--fs-text-on-action); } .task-advance-btn:disabled { opacity: 0.4; cursor: default; } .priority-dot { @@ -1475,7 +1475,7 @@ async function confirmDelete() { font-family: inherit; } .modal-btn:hover { background: var(--color-bg); } -.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: #fff; } +.modal-btn-danger { background: var(--color-action-destructive); border-color: var(--color-action-destructive); color: var(--fs-text-on-action); } .modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); } /* ── Skeleton ────────────────────────────────────────────────── */ diff --git a/frontend/src/views/RegisterInviteView.vue b/frontend/src/views/RegisterInviteView.vue index 6ee9eed..de7d162 100644 --- a/frontend/src/views/RegisterInviteView.vue +++ b/frontend/src/views/RegisterInviteView.vue @@ -251,7 +251,7 @@ async function handleSubmit() { width: 100%; padding: 0.6rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/RegisterView.vue b/frontend/src/views/RegisterView.vue index 3d71ebe..24112a4 100644 --- a/frontend/src/views/RegisterView.vue +++ b/frontend/src/views/RegisterView.vue @@ -220,7 +220,7 @@ async function handleSubmit() { width: 100%; padding: 0.6rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/ResetPasswordView.vue b/frontend/src/views/ResetPasswordView.vue index a7e2816..92a4af8 100644 --- a/frontend/src/views/ResetPasswordView.vue +++ b/frontend/src/views/ResetPasswordView.vue @@ -199,7 +199,7 @@ async function handleSubmit() { width: 100%; padding: 0.6rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/SettingsView.vue b/frontend/src/views/SettingsView.vue index fbcf524..390ecca 100644 --- a/frontend/src/views/SettingsView.vue +++ b/frontend/src/views/SettingsView.vue @@ -2567,7 +2567,7 @@ function formatUserDate(iso: string): string { .btn-save { padding: 0.4rem 0.9rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -2595,7 +2595,7 @@ function formatUserDate(iso: string): string { } .btn-danger-outline:hover:not(:disabled) { background: var(--color-action-destructive); - color: #fff; + color: var(--fs-text-on-action); } .btn-danger-outline:disabled { opacity: 0.5; cursor: default; } @@ -2603,7 +2603,7 @@ function formatUserDate(iso: string): string { .btn-danger { padding: 0.4rem 0.9rem; background: var(--color-action-destructive); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -2620,7 +2620,7 @@ function formatUserDate(iso: string): string { .btn-secondary { padding: 0.4rem 0.9rem; background: var(--color-action-secondary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -2685,7 +2685,7 @@ function formatUserDate(iso: string): string { .db-health-table tr.dh-warn td:first-child code { color: var(--color-warning); } .btn-warn:hover:not(:disabled) { background: var(--color-warning); - color: #fff; + color: var(--fs-text-on-action); } .saved-msg { @@ -3000,7 +3000,7 @@ function formatUserDate(iso: string): string { .btn-confirm-delete { padding: 0.25rem 0.6rem; background: var(--color-action-destructive); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -3033,7 +3033,7 @@ function formatUserDate(iso: string): string { transition: background 0.15s; } .btn-toggle:disabled { opacity: 0.6; cursor: default; } -.btn-toggle-open { background: var(--color-action-primary); color: #fff; } +.btn-toggle-open { background: var(--color-action-primary); color: var(--fs-text-on-action); } .btn-toggle-open:hover:not(:disabled) { background: var(--color-action-primary-hover); } .btn-toggle-close { background: var(--color-bg-secondary); @@ -3151,7 +3151,7 @@ function formatUserDate(iso: string): string { .btn-primary { padding: 0.4rem 0.9rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -3391,7 +3391,7 @@ function formatUserDate(iso: string): string { } .unit-btn.active { background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); } .unit-btn:hover:not(.active) { color: var(--color-text); @@ -3863,7 +3863,7 @@ function formatUserDate(iso: string): string { } .btn-danger-outline:hover:not(:disabled) { background: var(--color-action-destructive); - color: #fff; + color: var(--fs-text-on-action); } .btn-danger-outline:disabled { opacity: 0.5; cursor: default; } @keyframes va-dot-bounce { diff --git a/frontend/src/views/SnippetDetailView.vue b/frontend/src/views/SnippetDetailView.vue index 82bea87..70cd7cd 100644 --- a/frontend/src/views/SnippetDetailView.vue +++ b/frontend/src/views/SnippetDetailView.vue @@ -268,7 +268,7 @@ async function confirmDelete() { padding: 0.35rem 0.8rem; border: none; background: var(--color-action-destructive, #6B2118); - color: #fff; + color: var(--fs-text-on-action); border-radius: var(--radius-sm); cursor: pointer; font-size: 0.85rem; diff --git a/frontend/src/views/SnippetEditorView.vue b/frontend/src/views/SnippetEditorView.vue index 7420b6d..c672fe6 100644 --- a/frontend/src/views/SnippetEditorView.vue +++ b/frontend/src/views/SnippetEditorView.vue @@ -575,7 +575,7 @@ function cancel() { .btn-primary { padding: 0.5rem 1.1rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/SnippetListView.vue b/frontend/src/views/SnippetListView.vue index 411df7f..6f7606b 100644 --- a/frontend/src/views/SnippetListView.vue +++ b/frontend/src/views/SnippetListView.vue @@ -546,7 +546,7 @@ function usageTitle(s: SnippetListItem): string { .btn-primary { padding: 0.45rem 1rem; background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -679,7 +679,7 @@ function usageTitle(s: SnippetListItem): string { } .empty-action:hover { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); } .skeleton-grid, @@ -1021,7 +1021,7 @@ function usageTitle(s: SnippetListItem): string { .modal-btn-primary { background: var(--color-action-primary); border-color: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); } .modal-btn-primary:hover:not(:disabled) { background: var(--color-action-primary-hover); diff --git a/frontend/src/views/TaskEditorView.vue b/frontend/src/views/TaskEditorView.vue index 4617777..6032a11 100644 --- a/frontend/src/views/TaskEditorView.vue +++ b/frontend/src/views/TaskEditorView.vue @@ -971,7 +971,7 @@ useEditorGuards(dirty, save); .btn-subtask-confirm { padding: 0.25rem 0.5rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; diff --git a/frontend/src/views/TaskViewerView.vue b/frontend/src/views/TaskViewerView.vue index f9065ef..44e7fbf 100644 --- a/frontend/src/views/TaskViewerView.vue +++ b/frontend/src/views/TaskViewerView.vue @@ -501,7 +501,7 @@ const subTaskProgress = computed(() => { border: none; border-radius: var(--radius-sm); background: var(--color-action-primary); - color: #fff; + color: var(--fs-text-on-action); text-decoration: none; cursor: pointer; font-size: 0.875rem; @@ -511,14 +511,14 @@ const subTaskProgress = computed(() => { .btn-edit:hover, .btn-advance:hover { background: var(--color-action-primary-hover); - color: #fff; + color: var(--fs-text-on-action); } /* Convert + Share: Bronze action-secondary — alternate paths */ .btn-convert { margin-left: auto; padding: 0.3rem 0.75rem; background: var(--color-action-secondary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -536,7 +536,7 @@ const subTaskProgress = computed(() => { background: var(--color-action-secondary); border: none; border-radius: var(--radius-sm); - color: #fff; + color: var(--fs-text-on-action); cursor: pointer; font-size: 0.85rem; font-family: inherit; diff --git a/frontend/src/views/UserManagementView.vue b/frontend/src/views/UserManagementView.vue index 95a165d..1fb1721 100644 --- a/frontend/src/views/UserManagementView.vue +++ b/frontend/src/views/UserManagementView.vue @@ -331,7 +331,7 @@ function formatDate(iso: string): string { .btn-invite { padding: 0.45rem 1rem; background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer; @@ -395,7 +395,7 @@ function formatDate(iso: string): string { } .btn-toggle-open { background: var(--color-primary); - color: #fff; + color: var(--fs-text-on-action); } .btn-toggle-open:hover:not(:disabled) { opacity: 0.9; @@ -498,7 +498,7 @@ function formatDate(iso: string): string { .btn-confirm-delete { padding: 0.25rem 0.6rem; background: var(--color-danger); - color: #fff; + color: var(--fs-text-on-action); border: none; border-radius: var(--radius-sm); cursor: pointer;