bvandeusen/FabledScribe
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 50 Wiki Activity

fix(theme): text on a filled colour needs its own token — the old one inverts
CI & Build / Python lint (push) Successful in 4s
Details
CI & Build / Plugin hooks (push) Successful in 13s
Details
CI & Build / integration (push) Successful in 29s
Details
CI & Build / TypeScript typecheck (push) Successful in 33s
Details
CI & Build / Python tests (push) Successful in 55s
Details
CI & Build / Build & push image (push) Successful in 41s
Details

Browse Source 
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) <noreply@anthropic.com>
Claude-Session: https://claude.ai/code/session_01UaYUaouG9jjhATyuxCKrQs
This commit is contained in:
bvandeusen
2026-07-31 22:40:58 -04:00
co-authored by Claude Opus 5
parent 731ca284c3
commit 4c9a637507
32 changed files with 86 additions and 87 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+1 -1
View File
@@ -255,7 +255,7 @@ onUnmounted(() => {
z-index: 9999; z-index: 9999;
padding: 0.4rem 0.75rem; padding: 0.4rem 0.75rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border-radius: 0 0 4px 4px; border-radius: 0 0 4px 4px;
font-size: 0.875rem; font-size: 0.875rem;
text-decoration: none; text-decoration: none;
frontend/src/assets/editor-shared.css
+8 -8
View File
@@ -56,7 +56,7 @@
.btn-save { .btn-save {
padding: 0.45rem 1.1rem; padding: 0.45rem 1.1rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -76,7 +76,7 @@
.btn-delete { .btn-delete {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-action-destructive); background: var(--color-action-destructive);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -187,12 +187,12 @@
} }
.tag-pill:hover:not(:disabled) { .tag-pill:hover:not(:disabled) {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.tag-pill.applied { .tag-pill.applied {
background: var(--color-success, #2ecc71); background: var(--color-success, #2ecc71);
border-color: var(--color-success, #2ecc71); border-color: var(--color-success, #2ecc71);
color: #fff; color: var(--fs-text-on-action);
cursor: default; cursor: default;
} }
.tag-check { .tag-check {
@@ -345,7 +345,7 @@
.btn-generate { .btn-generate {
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -478,7 +478,7 @@
.btn-accept { .btn-accept {
padding: 0.4rem 1rem; padding: 0.4rem 1rem;
background: var(--color-success); background: var(--color-success);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -537,7 +537,7 @@
} }
.modal-btn-danger { .modal-btn-danger {
background: var(--color-danger); background: var(--color-danger);
color: #fff; color: var(--fs-text-on-action);
border-color: var(--color-danger); border-color: var(--color-danger);
} }
@@ -548,7 +548,7 @@
transform: translateX(-50%); transform: translateX(-50%);
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/assets/theme.css
+9 -5
View File
@@ -132,9 +132,10 @@
--fs-table-stripe: color-mix(in srgb, var(--fs-text-primary) 3%, transparent); --fs-table-stripe: color-mix(in srgb, var(--fs-text-primary) 3%, transparent);
/* text */ /* 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-secondary: #C2BFB4;
--fs-text-tertiary: #9C9A92; --fs-text-tertiary: #9C9A92;
--fs-text-on-action: #E8E4D8; /* text on a filled colour — NOT mode-dependent */
/* type */ /* type */
--fs-size-display: 40px; --fs-size-display: 40px;
@@ -179,9 +180,9 @@
} }
/* SUPERSEDES — write the token, not the literal. /* SUPERSEDES — write the token, not the literal.
* #fff -> --fs-text-primary * #fff -> --fs-text-on-action
* #ffffff -> --fs-text-primary * #ffffff -> --fs-text-on-action
* white -> --fs-text-primary * white -> --fs-text-on-action
* bold -> --fs-weight-medium * bold -> --fs-weight-medium
* bolder -> --fs-weight-medium * bolder -> --fs-weight-medium
*/ */
@@ -290,7 +291,10 @@
visual shifts exactly where a fallback had drifted; that shift IS the fix. visual shifts exactly where a fallback had drifted; that shift IS the fix.
------------------------------------------------------------------ */ ------------------------------------------------------------------ */
--color-accent: var(--fs-accent); --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-hover: var(--fs-surface-hover);
--color-bg-hover: var(--fs-surface-hover); --color-bg-hover: var(--fs-surface-hover);
--color-bg-tertiary: var(--fs-surface-hover); --color-bg-tertiary: var(--fs-surface-hover);
frontend/src/components/HistoryPanel.vue
+1 -1
View File
@@ -396,7 +396,7 @@ onMounted(loadVersions);
.btn-restore { .btn-restore {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/components/InlineAssistPanel.vue
+1 -1
View File
@@ -192,7 +192,7 @@ const markers: Record<DiffLine["type"], string> = {
} }
.iap-btn-accept { .iap-btn-accept {
background: var(--color-success, #22c55e); background: var(--color-success, #22c55e);
color: #fff; color: var(--fs-text-on-action);
} }
.iap-btn-accept:hover { opacity: 0.85; } .iap-btn-accept:hover { opacity: 0.85; }
frontend/src/components/NotificationBell.vue
+1 -1
View File
@@ -82,7 +82,7 @@ onUnmounted(() => {
top: -5px; top: -5px;
right: -5px; right: -5px;
background: var(--color-danger, #ef4444); background: var(--color-danger, #ef4444);
color: #fff; color: var(--fs-text-on-action);
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
min-width: 16px; min-width: 16px;
frontend/src/components/PaginationBar.vue
+1 -1
View File
@@ -90,7 +90,7 @@ function goToPage(page: number) {
} }
.page-btn.active { .page-btn.active {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border-color: var(--color-primary); border-color: var(--color-primary);
} }
.ellipsis { .ellipsis {
frontend/src/components/ShareDialog.vue
+2 -2
View File
@@ -268,7 +268,7 @@ onMounted(async () => {
.share-tab.active { .share-tab.active {
background: var(--color-primary); background: var(--color-primary);
border-color: var(--color-primary); border-color: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.share-target-form { .share-target-form {
@@ -339,7 +339,7 @@ onMounted(async () => {
.btn-add-share { .btn-add-share {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--gradient-cta); background: var(--gradient-cta);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: 6px; border-radius: 6px;
font-size: 0.85rem; font-size: 0.85rem;
frontend/src/components/SystemsSection.vue
+3 -3
View File
@@ -390,7 +390,7 @@ async function confirmDelete() {
.btn-confirm { .btn-confirm {
padding: 0.35rem 0.8rem; padding: 0.35rem 0.8rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -405,7 +405,7 @@ async function confirmDelete() {
padding: 0.35rem 0.8rem; padding: 0.35rem 0.8rem;
background: var(--color-action-secondary); background: var(--color-action-secondary);
border: none; border: none;
color: #fff; color: var(--fs-text-on-action);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-size: 0.82rem; font-size: 0.82rem;
@@ -555,6 +555,6 @@ async function confirmDelete() {
font-family: inherit; font-family: inherit;
} }
.modal-btn:hover { background: var(--color-bg); } .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); } .modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
</style> </style>
frontend/src/components/TaskLogSection.vue
+2 -2
View File
@@ -217,7 +217,7 @@ onMounted(loadLogs);
.log-duration-badge { .log-duration-badge {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border-radius: 99px; border-radius: 99px;
padding: 0.1rem 0.5rem; padding: 0.1rem 0.5rem;
font-size: 0.72rem; font-size: 0.72rem;
@@ -312,7 +312,7 @@ onMounted(loadLogs);
margin-left: auto; margin-left: auto;
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/components/ToastNotification.vue
+2 -2
View File
@@ -36,7 +36,7 @@ const toastStore = useToastStore();
gap: 0.5rem; gap: 0.5rem;
padding: 0.75rem 1rem; padding: 0.75rem 1rem;
border-radius: 6px; border-radius: 6px;
color: #fff; color: var(--fs-text-on-action);
font-size: 0.9rem; font-size: 0.9rem;
box-shadow: 0 2px 8px var(--color-shadow); box-shadow: 0 2px 8px var(--color-shadow);
min-width: 200px; min-width: 200px;
@@ -54,7 +54,7 @@ const toastStore = useToastStore();
padding: 0 0.15rem; padding: 0 0.15rem;
} }
.toast-close:hover { .toast-close:hover {
color: #fff; color: var(--fs-text-on-action);
} }
.toast--success { .toast--success {
background: var(--color-toast-success); background: var(--color-toast-success);
frontend/src/components/VersionHistorySection.vue
+1 -1
View File
@@ -241,7 +241,7 @@ function restore() {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
font-size: 0.78rem; font-size: 0.78rem;
color: #fff; color: var(--fs-text-on-action);
cursor: pointer; cursor: pointer;
font-family: inherit; font-family: inherit;
} }
frontend/src/components/WorkspaceNoteEditor.vue
+3 -3
View File
@@ -643,7 +643,7 @@ defineExpose({ reload: loadProjectNotes });
border-radius: 3px; border-radius: 3px;
transition: background 0.15s, color 0.15s; 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-confirm-delete:disabled { opacity: 0.5; cursor: default; }
.btn-cancel-delete { .btn-cancel-delete {
@@ -671,7 +671,7 @@ defineExpose({ reload: loadProjectNotes });
.btn-confirm { .btn-confirm {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: 4px; border-radius: 4px;
padding: 0.15rem 0.35rem; padding: 0.15rem 0.35rem;
@@ -733,7 +733,7 @@ defineExpose({ reload: loadProjectNotes });
/* Moss action-primary per Hybrid */ /* Moss action-primary per Hybrid */
.btn-save { .btn-save {
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 0.25rem 0.7rem; padding: 0.25rem 0.7rem;
frontend/src/components/WorkspaceTaskPanel.vue
+2 -2
View File
@@ -398,7 +398,7 @@ defineExpose({ reload: loadAll });
.btn-add { .btn-add {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: 5px; border-radius: 5px;
padding: 0.28rem 0.55rem; padding: 0.28rem 0.55rem;
@@ -590,7 +590,7 @@ defineExpose({ reload: loadAll });
margin-left: 0.25rem; margin-left: 0.25rem;
transition: background 0.15s, color 0.15s; 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-confirm:disabled { opacity: 0.5; cursor: default; }
.btn-delete-cancel { .btn-delete-cancel {
frontend/src/views/DesignSystemsView.vue
+1 -6
View File
@@ -1273,14 +1273,9 @@ textarea.input {
border: 1px solid transparent; 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 { .btn-primary {
background: var(--color-action-primary); background: var(--color-action-primary);
color: #E8E4D8; color: var(--fs-text-on-action);
} }
.btn-primary:not(:disabled):hover { .btn-primary:not(:disabled):hover {
frontend/src/views/ForgotPasswordView.vue
+1 -1
View File
@@ -141,7 +141,7 @@ async function handleSubmit() {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/KnowledgeView.vue
+1 -1
View File
@@ -574,7 +574,7 @@ onUnmounted(() => {
border-radius: 10px; border-radius: 10px;
border: none; border: none;
background: var(--gradient-cta); background: var(--gradient-cta);
color: #fff; color: var(--fs-text-on-action);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
frontend/src/views/LoginView.vue
+1 -1
View File
@@ -180,7 +180,7 @@ function loginWithOAuth() {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/NoteEditorView.vue
+1 -1
View File
@@ -748,7 +748,7 @@ onUnmounted(() => assist.clearSelection());
cursor: pointer; cursor: pointer;
font-family: inherit; 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 { .link-suggest-list {
display: flex; display: flex;
frontend/src/views/NoteViewerView.vue
+4 -4
View File
@@ -354,7 +354,7 @@ async function convertToTask() {
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
@@ -363,14 +363,14 @@ async function convertToTask() {
} }
.btn-edit:hover { .btn-edit:hover {
background: var(--color-action-primary-hover); background: var(--color-action-primary-hover);
color: #fff; color: var(--fs-text-on-action);
} }
/* Convert + Share: Bronze action-secondary — alternate paths */ /* Convert + Share: Bronze action-secondary — alternate paths */
.btn-convert { .btn-convert {
margin-left: auto; margin-left: auto;
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
background: var(--color-action-secondary); background: var(--color-action-secondary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -388,7 +388,7 @@ async function convertToTask() {
background: var(--color-action-secondary); background: var(--color-action-secondary);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: #fff; color: var(--fs-text-on-action);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
font-family: inherit; font-family: inherit;
frontend/src/views/ProjectListView.vue
+3 -3
View File
@@ -287,7 +287,7 @@ function overallPct(project: Project): { total: number; pct: number } {
.btn-primary { .btn-primary {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; 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-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-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 { 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 { .skeleton-card {
height: 140px; height: 140px;
@@ -594,7 +594,7 @@ function overallPct(project: Project): { total: number; pct: number } {
.modal-btn-primary { .modal-btn-primary {
background: var(--color-primary); background: var(--color-primary);
border-color: var(--color-primary); border-color: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.modal-btn-primary:hover:not(:disabled) { .modal-btn-primary:hover:not(:disabled) {
opacity: 0.9; opacity: 0.9;
frontend/src/views/ProjectView.vue
+11 -11
View File
@@ -879,7 +879,7 @@ async function confirmDelete() {
gap: 0.35rem; gap: 0.35rem;
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--gradient-cta); background: var(--gradient-cta);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.875rem; font-size: 0.875rem;
@@ -888,14 +888,14 @@ async function confirmDelete() {
box-shadow: var(--glow-cta); box-shadow: var(--glow-cta);
transition: box-shadow 0.15s, opacity 0.15s; 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 */ /* Share: Bronze action-secondary — alternate path */
.btn-share { .btn-share {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
background: var(--color-action-secondary); background: var(--color-action-secondary);
border: none; border: none;
color: #fff; color: var(--fs-text-on-action);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
@@ -917,7 +917,7 @@ async function confirmDelete() {
font-family: inherit; font-family: inherit;
transition: background 0.15s, color 0.15s; 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; } .error-msg { color: var(--color-danger); font-size: 0.9rem; }
@@ -1065,7 +1065,7 @@ async function confirmDelete() {
.btn-save-panel { .btn-save-panel {
padding: 0.45rem 0.9rem; padding: 0.45rem 0.9rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -1151,7 +1151,7 @@ async function confirmDelete() {
.btn-ms-confirm { .btn-ms-confirm {
padding: 0.3rem 0.65rem; padding: 0.3rem 0.65rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -1165,7 +1165,7 @@ async function confirmDelete() {
padding: 0.3rem 0.65rem; padding: 0.3rem 0.65rem;
background: var(--color-action-secondary); background: var(--color-action-secondary);
border: none; border: none;
color: #fff; color: var(--fs-text-on-action);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-size: 0.78rem; font-size: 0.78rem;
@@ -1224,7 +1224,7 @@ async function confirmDelete() {
cursor: pointer; cursor: pointer;
border: 1px solid var(--color-border); 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-primary:disabled { opacity: 0.6; cursor: default; }
.ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); } .ms-plan-actions .btn-secondary { background: var(--color-bg-card); color: var(--color-text); }
@@ -1393,8 +1393,8 @@ async function confirmDelete() {
line-height: 1; line-height: 1;
} }
.task-card:hover .task-advance-btn { opacity: 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: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: #fff; } .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; } .task-advance-btn:disabled { opacity: 0.4; cursor: default; }
.priority-dot { .priority-dot {
@@ -1475,7 +1475,7 @@ async function confirmDelete() {
font-family: inherit; font-family: inherit;
} }
.modal-btn:hover { background: var(--color-bg); } .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); } .modal-btn-danger:hover { background: var(--color-action-destructive-hover); border-color: var(--color-action-destructive-hover); }
/* ── Skeleton ────────────────────────────────────────────────── */ /* ── Skeleton ────────────────────────────────────────────────── */
frontend/src/views/RegisterInviteView.vue
+1 -1
View File
@@ -251,7 +251,7 @@ async function handleSubmit() {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/RegisterView.vue
+1 -1
View File
@@ -220,7 +220,7 @@ async function handleSubmit() {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/ResetPasswordView.vue
+1 -1
View File
@@ -199,7 +199,7 @@ async function handleSubmit() {
width: 100%; width: 100%;
padding: 0.6rem; padding: 0.6rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/SettingsView.vue
+10 -10
View File
@@ -2567,7 +2567,7 @@ function formatUserDate(iso: string): string {
.btn-save { .btn-save {
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -2595,7 +2595,7 @@ function formatUserDate(iso: string): string {
} }
.btn-danger-outline:hover:not(:disabled) { .btn-danger-outline:hover:not(:disabled) {
background: var(--color-action-destructive); background: var(--color-action-destructive);
color: #fff; color: var(--fs-text-on-action);
} }
.btn-danger-outline:disabled { opacity: 0.5; cursor: default; } .btn-danger-outline:disabled { opacity: 0.5; cursor: default; }
@@ -2603,7 +2603,7 @@ function formatUserDate(iso: string): string {
.btn-danger { .btn-danger {
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: var(--color-action-destructive); background: var(--color-action-destructive);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -2620,7 +2620,7 @@ function formatUserDate(iso: string): string {
.btn-secondary { .btn-secondary {
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: var(--color-action-secondary); background: var(--color-action-secondary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; 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); } .db-health-table tr.dh-warn td:first-child code { color: var(--color-warning); }
.btn-warn:hover:not(:disabled) { .btn-warn:hover:not(:disabled) {
background: var(--color-warning); background: var(--color-warning);
color: #fff; color: var(--fs-text-on-action);
} }
.saved-msg { .saved-msg {
@@ -3000,7 +3000,7 @@ function formatUserDate(iso: string): string {
.btn-confirm-delete { .btn-confirm-delete {
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
background: var(--color-action-destructive); background: var(--color-action-destructive);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -3033,7 +3033,7 @@ function formatUserDate(iso: string): string {
transition: background 0.15s; transition: background 0.15s;
} }
.btn-toggle:disabled { opacity: 0.6; cursor: default; } .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-open:hover:not(:disabled) { background: var(--color-action-primary-hover); }
.btn-toggle-close { .btn-toggle-close {
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
@@ -3151,7 +3151,7 @@ function formatUserDate(iso: string): string {
.btn-primary { .btn-primary {
padding: 0.4rem 0.9rem; padding: 0.4rem 0.9rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -3391,7 +3391,7 @@ function formatUserDate(iso: string): string {
} }
.unit-btn.active { .unit-btn.active {
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.unit-btn:hover:not(.active) { .unit-btn:hover:not(.active) {
color: var(--color-text); color: var(--color-text);
@@ -3863,7 +3863,7 @@ function formatUserDate(iso: string): string {
} }
.btn-danger-outline:hover:not(:disabled) { .btn-danger-outline:hover:not(:disabled) {
background: var(--color-action-destructive); background: var(--color-action-destructive);
color: #fff; color: var(--fs-text-on-action);
} }
.btn-danger-outline:disabled { opacity: 0.5; cursor: default; } .btn-danger-outline:disabled { opacity: 0.5; cursor: default; }
@keyframes va-dot-bounce { @keyframes va-dot-bounce {
frontend/src/views/SnippetDetailView.vue
+1 -1
View File
@@ -268,7 +268,7 @@ async function confirmDelete() {
padding: 0.35rem 0.8rem; padding: 0.35rem 0.8rem;
border: none; border: none;
background: var(--color-action-destructive, #6B2118); background: var(--color-action-destructive, #6B2118);
color: #fff; color: var(--fs-text-on-action);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
frontend/src/views/SnippetEditorView.vue
+1 -1
View File
@@ -575,7 +575,7 @@ function cancel() {
.btn-primary { .btn-primary {
padding: 0.5rem 1.1rem; padding: 0.5rem 1.1rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/SnippetListView.vue
+3 -3
View File
@@ -546,7 +546,7 @@ function usageTitle(s: SnippetListItem): string {
.btn-primary { .btn-primary {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -679,7 +679,7 @@ function usageTitle(s: SnippetListItem): string {
} }
.empty-action:hover { .empty-action:hover {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.skeleton-grid, .skeleton-grid,
@@ -1021,7 +1021,7 @@ function usageTitle(s: SnippetListItem): string {
.modal-btn-primary { .modal-btn-primary {
background: var(--color-action-primary); background: var(--color-action-primary);
border-color: var(--color-action-primary); border-color: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.modal-btn-primary:hover:not(:disabled) { .modal-btn-primary:hover:not(:disabled) {
background: var(--color-action-primary-hover); background: var(--color-action-primary-hover);
frontend/src/views/TaskEditorView.vue
+1 -1
View File
@@ -971,7 +971,7 @@ useEditorGuards(dirty, save);
.btn-subtask-confirm { .btn-subtask-confirm {
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
frontend/src/views/TaskViewerView.vue
+4 -4
View File
@@ -501,7 +501,7 @@ const subTaskProgress = computed(() => {
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-action-primary); background: var(--color-action-primary);
color: #fff; color: var(--fs-text-on-action);
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
@@ -511,14 +511,14 @@ const subTaskProgress = computed(() => {
.btn-edit:hover, .btn-edit:hover,
.btn-advance:hover { .btn-advance:hover {
background: var(--color-action-primary-hover); background: var(--color-action-primary-hover);
color: #fff; color: var(--fs-text-on-action);
} }
/* Convert + Share: Bronze action-secondary — alternate paths */ /* Convert + Share: Bronze action-secondary — alternate paths */
.btn-convert { .btn-convert {
margin-left: auto; margin-left: auto;
padding: 0.3rem 0.75rem; padding: 0.3rem 0.75rem;
background: var(--color-action-secondary); background: var(--color-action-secondary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -536,7 +536,7 @@ const subTaskProgress = computed(() => {
background: var(--color-action-secondary); background: var(--color-action-secondary);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
color: #fff; color: var(--fs-text-on-action);
cursor: pointer; cursor: pointer;
font-size: 0.85rem; font-size: 0.85rem;
font-family: inherit; font-family: inherit;
frontend/src/views/UserManagementView.vue
+3 -3
View File
@@ -331,7 +331,7 @@ function formatDate(iso: string): string {
.btn-invite { .btn-invite {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
@@ -395,7 +395,7 @@ function formatDate(iso: string): string {
} }
.btn-toggle-open { .btn-toggle-open {
background: var(--color-primary); background: var(--color-primary);
color: #fff; color: var(--fs-text-on-action);
} }
.btn-toggle-open:hover:not(:disabled) { .btn-toggle-open:hover:not(:disabled) {
opacity: 0.9; opacity: 0.9;
@@ -498,7 +498,7 @@ function formatDate(iso: string): string {
.btn-confirm-delete { .btn-confirm-delete {
padding: 0.25rem 0.6rem; padding: 0.25rem 0.6rem;
background: var(--color-danger); background: var(--color-danger);
color: #fff; color: var(--fs-text-on-action);
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;