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

refactor(theme): remove 184 var() fallbacks — every one was unreachable
CI & Build / Python lint (push) Successful in 3s
Details
CI & Build / Plugin hooks (push) Successful in 16s
Details
CI & Build / integration (push) Successful in 23s
Details
CI & Build / TypeScript typecheck (push) Successful in 25s
Details
CI & Build / Python tests (push) Successful in 57s
Details
CI & Build / Build & push image (push) Successful in 43s
Details

Browse Source 
#2277 counted ~150 "raw colour literals bypassing the tokens". Measuring them
told a different story: 184 sat in `var(--token, #fallback)` position, and a
check against theme.css shows every one of those tokens IS declared. So the
fallbacks could not render. Not drift — vestigial.

They were also not this palette. The most common were Tailwind and Flat-UI
defaults — #6366f1 indigo, #22c55e green, #f59e0b amber, #3b82f6 blue,
#e74c3c and #27ae60 — a second, unsanctioned colour scheme sitting in the
codebase looking like the app's colours to anyone reading it.

Removing them is not tidying. #2319's lesson is that a fallback is WORSE than a
missing token: a missing token renders as nothing and someone eventually
notices, while a fallback renders something plausible forever. These 184 were
one token rename away from silently repainting the app in Tailwind. The design
token check would catch the rename — but the fallback is precisely the thing
that would make it invisible if the check were ever bypassed.

Literal count 152 -> 45, which matters beyond the number: a report that is
mostly unreachable noise is one people stop reading, and then it stops working
while still passing. What remains should be genuinely worth looking at.

Done with a paren-aware transform, not a regex — `var(--x, rgba(0,0,0,.5))`
nests parens and `[^)]+` would cut at the first one and leave `))` behind.
Verified after: every changed line is a fallback strip and nothing else, and
every var() reference still resolves.

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-08-03 11:52:04 -04:00
co-authored by Claude Opus 5
parent 174ec8af46
commit bd60d679d9
33 changed files with 176 additions and 176 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/App.vue
+3 -3
View File
@@ -300,7 +300,7 @@ onUnmounted(() => {
.shortcuts-overlay { .shortcuts-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: var(--color-overlay, rgba(0, 0, 0, 0.45)); background: var(--color-overlay);
z-index: 9000; z-index: 9000;
display: flex; display: flex;
align-items: center; align-items: center;
@@ -309,8 +309,8 @@ onUnmounted(() => {
.shortcuts-panel { .shortcuts-panel {
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px); border-radius: var(--radius-md);
box-shadow: 0 8px 32px var(--color-shadow, rgba(0,0,0,0.2)); box-shadow: 0 8px 32px var(--color-shadow);
width: min(420px, 92vw); width: min(420px, 92vw);
overflow: hidden; overflow: hidden;
} }
frontend/src/assets/editor-shared.css
+2 -2
View File
@@ -98,8 +98,8 @@
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
} }
.tag-pill.applied { .tag-pill.applied {
background: var(--color-success, #2ecc71); background: var(--color-success);
border-color: var(--color-success, #2ecc71); border-color: var(--color-success);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
cursor: default; cursor: default;
} }
frontend/src/assets/prose.css
+2 -2
View File
@@ -219,7 +219,7 @@
} }
.tiptap-editor .ProseMirror p.is-editor-empty:first-child::before { .tiptap-editor .ProseMirror p.is-editor-empty:first-child::before {
color: var(--color-text-muted, var(--color-text-secondary)); color: var(--color-text-muted);
content: attr(data-placeholder); content: attr(data-placeholder);
float: left; float: left;
height: 0; height: 0;
@@ -234,5 +234,5 @@
} }
.tiptap-wrapper:focus-within { .tiptap-wrapper:focus-within {
box-shadow: var(--focus-ring, 0 0 0 2px var(--color-primary)); box-shadow: var(--focus-ring);
} }
frontend/src/components/DiffView.vue
+6 -6
View File
@@ -110,8 +110,8 @@ function markerFor(type: DiffLine['type']): string {
font-weight: 600; font-weight: 600;
} }
.diff-summary-ins { color: var(--color-success, #2ecc71); } .diff-summary-ins { color: var(--color-success); }
.diff-summary-del { color: var(--color-danger, #e74c3c); } .diff-summary-del { color: var(--color-danger); }
.diff-scroll { .diff-scroll {
flex: 1; flex: 1;
@@ -136,13 +136,13 @@ function markerFor(type: DiffLine['type']): string {
} }
.diff-delete { .diff-delete {
background: color-mix(in srgb, var(--color-danger, #e74c3c) 12%, transparent); background: color-mix(in srgb, var(--color-danger) 12%, transparent);
color: var(--color-danger, #e74c3c); color: var(--color-danger);
} }
.diff-insert { .diff-insert {
background: color-mix(in srgb, var(--color-success, #2ecc71) 12%, transparent); background: color-mix(in srgb, var(--color-success) 12%, transparent);
color: var(--color-success, #2ecc71); color: var(--color-success);
} }
.diff-equal { .diff-equal {
frontend/src/components/HistoryPanel.vue
+13 -13
View File
@@ -403,12 +403,12 @@ onMounted(loadVersions);
font-size: 0.85em; font-size: 0.85em;
line-height: 1; line-height: 1;
} }
.pin-badge-manual { color: var(--color-primary, #6366f1); } .pin-badge-manual { color: var(--color-primary); }
.pin-badge-auto { color: var(--color-text-muted, rgba(255, 255, 255, 0.5)); } .pin-badge-auto { color: var(--color-text-muted); }
.history-item-label { .history-item-label {
font-size: 0.72rem; font-size: 0.72rem;
color: var(--color-primary, #6366f1); color: var(--color-primary);
font-style: italic; font-style: italic;
margin-top: 0.15rem; margin-top: 0.15rem;
overflow: hidden; overflow: hidden;
@@ -430,7 +430,7 @@ onMounted(loadVersions);
} }
.pin-state { .pin-state {
font-style: italic; font-style: italic;
color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); color: var(--color-text-muted);
flex: 1; flex: 1;
min-width: 0; min-width: 0;
overflow: hidden; overflow: hidden;
@@ -442,13 +442,13 @@ onMounted(loadVersions);
font-size: 0.78rem; font-size: 0.78rem;
background: transparent; background: transparent;
color: inherit; color: inherit;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12)); border: 1px solid var(--color-border);
border-radius: 999px; border-radius: 999px;
cursor: pointer; cursor: pointer;
} }
.btn-pin:hover:not(:disabled), .btn-pin-edit:hover:not(:disabled) { .btn-pin:hover:not(:disabled), .btn-pin-edit:hover:not(:disabled) {
background: rgba(99, 102, 241, 0.12); background: rgba(99, 102, 241, 0.12);
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary);
} }
.btn-unpin:hover:not(:disabled) { .btn-unpin:hover:not(:disabled) {
background: rgba(239, 68, 68, 0.10); background: rgba(239, 68, 68, 0.10);
@@ -463,27 +463,27 @@ onMounted(loadVersions);
flex: 1; flex: 1;
padding: 0.3rem 0.5rem; padding: 0.3rem 0.5rem;
font-size: 0.85rem; font-size: 0.85rem;
background: var(--color-input-bg, rgba(255, 255, 255, 0.03)); background: var(--color-input-bg);
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12)); border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 4px); border-radius: var(--radius-sm);
color: inherit; color: inherit;
} }
.pin-label-input:focus { .pin-label-input:focus {
outline: none; outline: none;
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary);
} }
.btn-pin-save, .btn-pin-cancel { .btn-pin-save, .btn-pin-cancel {
padding: 0.3rem 0.7rem; padding: 0.3rem 0.7rem;
font-size: 0.78rem; font-size: 0.78rem;
background: transparent; background: transparent;
color: inherit; color: inherit;
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.12)); border: 1px solid var(--color-border);
border-radius: var(--radius-sm, 4px); border-radius: var(--radius-sm);
cursor: pointer; cursor: pointer;
} }
.btn-pin-save:hover:not(:disabled) { .btn-pin-save:hover:not(:disabled) {
background: rgba(99, 102, 241, 0.12); background: rgba(99, 102, 241, 0.12);
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary);
} }
.btn-pin-save:disabled, .btn-pin-cancel:disabled, .btn-pin-save:disabled, .btn-pin-cancel:disabled,
.btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled { .btn-pin:disabled, .btn-pin-edit:disabled, .btn-unpin:disabled {
frontend/src/components/InlineAssistPanel.vue
+10 -10
View File
@@ -135,8 +135,8 @@ const markers: Record<DiffLine["type"], string> = {
flex-shrink: 0; flex-shrink: 0;
} }
.iap-btn-cancel:hover { .iap-btn-cancel:hover {
border-color: var(--color-danger, #e74c3c); border-color: var(--color-danger);
color: var(--color-danger, #e74c3c); color: var(--color-danger);
} }
.iap-stream-preview { .iap-stream-preview {
@@ -191,19 +191,19 @@ const markers: Record<DiffLine["type"], string> = {
font-weight: var(--fs-weight-medium); font-weight: var(--fs-weight-medium);
} }
.iap-btn-accept { .iap-btn-accept {
background: var(--color-success, #22c55e); background: var(--color-success);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
} }
.iap-btn-accept:hover { opacity: 0.85; } .iap-btn-accept:hover { opacity: 0.85; }
.iap-btn-reject { .iap-btn-reject {
background: var(--color-bg-card, var(--color-bg)); background: var(--color-bg-card);
color: var(--color-text-secondary); color: var(--color-text-secondary);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
} }
.iap-btn-reject:hover { .iap-btn-reject:hover {
border-color: var(--color-danger, #e74c3c); border-color: var(--color-danger);
color: var(--color-danger, #e74c3c); color: var(--color-danger);
} }
/* ── Diff ── */ /* ── Diff ── */
@@ -226,12 +226,12 @@ const markers: Record<DiffLine["type"], string> = {
.iap-diff-equal { color: var(--color-text-muted); } .iap-diff-equal { color: var(--color-text-muted); }
.iap-diff-delete { .iap-diff-delete {
background: color-mix(in srgb, var(--color-danger, #e74c3c) 10%, transparent); background: color-mix(in srgb, var(--color-danger) 10%, transparent);
color: var(--color-danger, #e74c3c); color: var(--color-danger);
} }
.iap-diff-insert { .iap-diff-insert {
background: color-mix(in srgb, var(--color-success, #22c55e) 10%, transparent); background: color-mix(in srgb, var(--color-success) 10%, transparent);
color: var(--color-success, #22c55e); color: var(--color-success);
} }
.iap-diff-marker { .iap-diff-marker {
frontend/src/components/NotificationBell.vue
+1 -1
View File
@@ -81,7 +81,7 @@ onUnmounted(() => {
position: absolute; position: absolute;
top: -5px; top: -5px;
right: -5px; right: -5px;
background: var(--color-danger, #ef4444); background: var(--color-danger);
color: var(--fs-text-on-action); color: var(--fs-text-on-action);
font-size: 0.6rem; font-size: 0.6rem;
font-weight: 700; font-weight: 700;
frontend/src/components/RecurrenceEditor.vue
+1 -1
View File
@@ -159,7 +159,7 @@ const calendarDayMax = computed(() =>
.rec-num-input { .rec-num-input {
width: 4rem; width: 4rem;
padding: 0.25rem 0.4rem; padding: 0.25rem 0.4rem;
border: 1px solid var(--color-input-border, var(--color-border)); border: 1px solid var(--color-input-border);
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
frontend/src/components/SystemsSection.vue
+2 -2
View File
@@ -445,7 +445,7 @@ async function confirmDelete() {
} }
.action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); } .action-btn:hover { background: var(--color-bg-secondary); color: var(--color-text); }
.action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; opacity: 1; } .action-btn:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 1px; opacity: 1; }
.action-delete:hover { color: var(--color-danger, #e74c3c); } .action-delete:hover { color: var(--color-danger); }
/* ── Empty ────────────────────────────────────────────────────── */ /* ── Empty ────────────────────────────────────────────────────── */
.systems-empty { .systems-empty {
@@ -483,7 +483,7 @@ async function confirmDelete() {
/* ── Modal ────────────────────────────────────────────────────── */ /* ── Modal ────────────────────────────────────────────────────── */
.modal-overlay { .modal-overlay {
position: fixed; inset: 0; position: fixed; inset: 0;
background: var(--color-overlay, rgba(0,0,0,0.45)); background: var(--color-overlay);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
z-index: 200; z-index: 200;
} }
frontend/src/components/TagInput.vue
+1 -1
View File
@@ -222,7 +222,7 @@ function focusInput() {
} }
.tag-autocomplete-item:hover, .tag-autocomplete-item:hover,
.tag-autocomplete-item.selected { .tag-autocomplete-item.selected {
background: var(--color-bg-hover, color-mix(in srgb, var(--color-primary) 8%, transparent)); background: var(--color-bg-hover);
color: var(--color-primary); color: var(--color-primary);
} }
</style> </style>
frontend/src/components/TaskCard.vue
+6 -6
View File
@@ -144,19 +144,19 @@ function isOverdue(): boolean {
opacity: 0.8; opacity: 0.8;
} }
.dot-todo { .dot-todo {
background: var(--color-status-todo, #94a3b8); background: var(--color-status-todo);
border: 2px solid var(--color-status-todo, #94a3b8); border: 2px solid var(--color-status-todo);
background: transparent; background: transparent;
border: 2px solid var(--color-text-muted); border: 2px solid var(--color-text-muted);
} }
.dot-in-progress { .dot-in-progress {
background: var(--color-status-in-progress, #3b82f6); background: var(--color-status-in-progress);
} }
.dot-done { .dot-done {
background: var(--color-status-done, #22c55e); background: var(--color-status-done);
} }
.dot-cancelled { .dot-cancelled {
background: var(--color-status-cancelled, #6b7280); background: var(--color-status-cancelled);
} }
.task-title-compact { .task-title-compact {
@@ -190,7 +190,7 @@ function isOverdue(): boolean {
flex-shrink: 0; flex-shrink: 0;
} }
.due-compact.overdue { .due-compact.overdue {
color: var(--color-danger, #e74c3c); color: var(--color-danger);
font-weight: 600; font-weight: 600;
} }
/* Full layout */ /* Full layout */
frontend/src/components/WorkspaceNoteEditor.vue
+1 -1
View File
@@ -463,7 +463,7 @@ defineExpose({ reload: loadProjectNotes });
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
background: var(--color-bg-card, var(--color-bg-secondary)); background: var(--color-bg-card);
} }
.rail-header { .rail-header {
frontend/src/components/WorkspaceTaskPanel.vue
+6 -6
View File
@@ -387,7 +387,7 @@ defineExpose({ reload: loadAll });
.task-add-input { .task-add-input {
flex: 1; flex: 1;
background: var(--color-input-bg, var(--color-bg)); background: var(--color-input-bg);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 5px; border-radius: 5px;
padding: 0.28rem 0.5rem; padding: 0.28rem 0.5rem;
@@ -413,7 +413,7 @@ defineExpose({ reload: loadAll });
gap: 0.4rem; gap: 0.4rem;
width: 100%; width: 100%;
padding: 0.4rem 0.65rem; padding: 0.4rem 0.65rem;
background: var(--color-surface-raised, color-mix(in srgb, var(--color-surface) 92%, var(--color-text))); background: var(--color-surface-raised);
border: none; border: none;
cursor: pointer; cursor: pointer;
text-align: left; text-align: left;
@@ -433,7 +433,7 @@ defineExpose({ reload: loadAll });
text-transform: capitalize; text-transform: capitalize;
} }
.ms-status-active { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); } .ms-status-active { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.ms-status-completed { background: color-mix(in srgb, var(--color-success, #27ae60) 15%, transparent); color: var(--color-success, #27ae60); } .ms-status-completed { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.task-items { .task-items {
list-style: none; list-style: none;
@@ -466,7 +466,7 @@ defineExpose({ reload: loadAll });
justify-content: center; justify-content: center;
} }
.status-dot.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); } .status-dot.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); }
.status-dot.status-done { border-color: var(--color-success, #27ae60); color: var(--color-success, #27ae60); } .status-dot.status-done { border-color: var(--color-success); color: var(--color-success); }
.task-title { .task-title {
flex: 1; flex: 1;
@@ -522,7 +522,7 @@ defineExpose({ reload: loadAll });
margin-left: auto; margin-left: auto;
} }
.status-badge.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); } .status-badge.status-in_progress { border-color: var(--color-primary); color: var(--color-primary); background: color-mix(in srgb, var(--color-primary) 10%, transparent); }
.status-badge.status-done { border-color: var(--color-success, #27ae60); color: var(--color-success, #27ae60); background: color-mix(in srgb, var(--color-success, #27ae60) 10%, transparent); } .status-badge.status-done { border-color: var(--color-success); color: var(--color-success); background: color-mix(in srgb, var(--color-success) 10%, transparent); }
.btn-edit-task { margin-left: 0.25rem; } .btn-edit-task { margin-left: 0.25rem; }
.btn-edit-task:hover { text-decoration: underline; } .btn-edit-task:hover { text-decoration: underline; }
@@ -614,7 +614,7 @@ defineExpose({ reload: loadAll });
flex-shrink: 0; flex-shrink: 0;
} }
.task-due.overdue { .task-due.overdue {
color: var(--color-danger, #e74c3c); color: var(--color-danger);
font-weight: 500; font-weight: 500;
} }
frontend/src/components/rules/PlanRulesPanel.vue
+2 -2
View File
@@ -46,7 +46,7 @@ watch(() => props.projectId, load);
<style scoped> <style scoped>
.plan-rules { .plan-rules {
margin-top: 1.5rem; margin-top: 1.5rem;
border-top: 1px solid var(--color-border, #2a2a2e); border-top: 1px solid var(--color-border);
padding-top: 1rem; padding-top: 1rem;
} }
.plan-rules h3 { .plan-rules h3 {
@@ -60,7 +60,7 @@ watch(() => props.projectId, load);
} }
.plan-rules ul { .plan-rules ul {
list-style: none; padding-left: 0.75rem; margin: 0.25rem 0; list-style: none; padding-left: 0.75rem; margin: 0.25rem 0;
border-left: 2px solid var(--color-primary, #6366f1); border-left: 2px solid var(--color-primary);
} }
.plan-rules li { margin: 0.35rem 0; font-size: 0.92em; } .plan-rules li { margin: 0.35rem 0; font-size: 0.92em; }
.truncated { opacity: 0.7; font-style: italic; font-size: 0.85em; } .truncated { opacity: 0.7; font-style: italic; font-size: 0.85em; }
frontend/src/components/rules/ProjectRulesTab.vue
+17 -17
View File
@@ -329,7 +329,7 @@ h3 {
.chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; } .chips { display: flex; gap: 0.5rem; flex-wrap: wrap; align-items: center; }
.chip { .chip {
display: inline-flex; align-items: center; gap: 0.25rem; display: inline-flex; align-items: center; gap: 0.25rem;
background: var(--color-primary-bg, rgba(99,102,241,0.15)); background: var(--color-primary-bg);
padding: 0.25rem 0.5rem; border-radius: 999px; padding: 0.25rem 0.5rem; border-radius: 999px;
} }
.chip a { cursor: pointer; } .chip a { cursor: pointer; }
@@ -337,13 +337,13 @@ h3 {
.chip-remove:hover { opacity: 1; } .chip-remove:hover { opacity: 1; }
.add { .add {
background: none; background: none;
border: 1px dashed var(--color-border, #2a2a2e); border: 1px dashed var(--color-border);
padding: 0.25rem 0.75rem; border-radius: 999px; cursor: pointer; padding: 0.25rem 0.75rem; border-radius: 999px; cursor: pointer;
color: inherit; color: inherit;
} }
select { select {
background: var(--color-bg, #111113); color: inherit; background: var(--color-bg); color: inherit;
border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px; border: 1px solid var(--color-border); border-radius: 6px;
padding: 0.25rem 0.5rem; padding: 0.25rem 0.5rem;
} }
.applicable { margin-top: 2rem; } .applicable { margin-top: 2rem; }
@@ -355,7 +355,7 @@ select {
} }
ul { list-style: none; padding: 0; margin: 0; } ul { list-style: none; padding: 0; margin: 0; }
.rule { .rule {
border-left: 2px solid var(--color-primary, #6366f1); border-left: 2px solid var(--color-primary);
padding-left: 0.75rem; margin: 0.5rem 0; padding-left: 0.75rem; margin: 0.5rem 0;
} }
.rule-head { cursor: pointer; } .rule-head { cursor: pointer; }
@@ -363,12 +363,12 @@ ul { list-style: none; padding: 0; margin: 0; }
.rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; } .rule-statement { display: block; opacity: 0.85; margin-top: 0.25rem; }
.rule-detail { .rule-detail {
margin-top: 0.5rem; padding: 0.5rem; margin-top: 0.5rem; padding: 0.5rem;
background: var(--color-bg, #111113); border-radius: 6px; background: var(--color-bg); border-radius: 6px;
} }
.rule-detail > div { margin-bottom: 0.5rem; } .rule-detail > div { margin-bottom: 0.5rem; }
.edit-link { .edit-link {
background: none; border: none; cursor: pointer; background: none; border: none; cursor: pointer;
color: var(--color-primary, #6366f1); padding: 0.5rem 0 0 0; color: var(--color-primary); padding: 0.5rem 0 0 0;
} }
.empty, .truncated { opacity: 0.7; font-style: italic; } .empty, .truncated { opacity: 0.7; font-style: italic; }
.empty a { cursor: pointer; text-decoration: underline; } .empty a { cursor: pointer; text-decoration: underline; }
@@ -377,18 +377,18 @@ ul { list-style: none; padding: 0; margin: 0; }
.new-rule-form { .new-rule-form {
display: flex; flex-direction: column; gap: 0.5rem; display: flex; flex-direction: column; gap: 0.5rem;
padding: 0.75rem; margin: 0.5rem 0; padding: 0.75rem; margin: 0.5rem 0;
background: var(--color-bg, #111113); background: var(--color-bg);
border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px; border: 1px solid var(--color-border); border-radius: 6px;
} }
.new-rule-form input, .new-rule-form textarea { .new-rule-form input, .new-rule-form textarea {
background: var(--color-surface, #18181b); color: inherit; background: var(--color-surface); color: inherit;
border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px; border: 1px solid var(--color-border); border-radius: 6px;
padding: 0.5rem; font: inherit; resize: vertical; padding: 0.5rem; font: inherit; resize: vertical;
} }
.rule-list { margin-top: 0.5rem; } .rule-list { margin-top: 0.5rem; }
.delete-link { .delete-link {
background: none; border: none; cursor: pointer; background: none; border: none; cursor: pointer;
color: var(--color-destructive, #b85a4a); padding: 0.5rem 0 0 0; color: var(--color-destructive); padding: 0.5rem 0 0 0;
} }
/* Per-rule / per-topic suppress affordance — quiet by default, reveal on hover */ /* Per-rule / per-topic suppress affordance — quiet by default, reveal on hover */
.topic-group h5 { .topic-group h5 {
@@ -400,14 +400,14 @@ ul { list-style: none; padding: 0; margin: 0; }
.rule-head-text { flex: 1; cursor: pointer; } .rule-head-text { flex: 1; cursor: pointer; }
.skip-btn { .skip-btn {
background: none; border: none; cursor: pointer; background: none; border: none; cursor: pointer;
color: var(--color-muted, #888); font-size: 0.75rem; color: var(--color-muted); font-size: 0.75rem;
padding: 0.1rem 0.4rem; opacity: 0; transition: opacity 0.15s; padding: 0.1rem 0.4rem; opacity: 0; transition: opacity 0.15s;
white-space: nowrap; white-space: nowrap;
} }
.topic-group h5:hover .skip-btn, .topic-group h5:hover .skip-btn,
.rule:hover .skip-btn, .rule:hover .skip-btn,
.skip-btn:focus { opacity: 1; } .skip-btn:focus { opacity: 1; }
.skip-btn:hover { color: var(--color-destructive, #b85a4a); } .skip-btn:hover { color: var(--color-destructive); }
/* Suppressed section */ /* Suppressed section */
.suppressed { margin-top: 1.5rem; } .suppressed { margin-top: 1.5rem; }
.suppressed-toggle { .suppressed-toggle {
@@ -426,13 +426,13 @@ ul { list-style: none; padding: 0; margin: 0; }
.suppressed-kind { .suppressed-kind {
font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em; font-size: 0.7em; text-transform: uppercase; letter-spacing: 0.05em;
padding: 0.1rem 0.4rem; border-radius: 3px; padding: 0.1rem 0.4rem; border-radius: 3px;
background: var(--color-bg, #111113); background: var(--color-bg);
border: 1px solid var(--color-border, #2a2a2e); border: 1px solid var(--color-border);
} }
.suppressed-path { flex: 1; } .suppressed-path { flex: 1; }
.reenable-btn { .reenable-btn {
background: none; border: none; cursor: pointer; background: none; border: none; cursor: pointer;
color: var(--color-primary, #6366f1); font-size: 0.85em; color: var(--color-primary); font-size: 0.85em;
} }
.reenable-btn:hover { text-decoration: underline; } .reenable-btn:hover { text-decoration: underline; }
</style> </style>
frontend/src/components/rules/RuleEditorSlideOver.vue
+5 -5
View File
@@ -98,8 +98,8 @@ watch(() => props.ruleId, load);
.slide-over { .slide-over {
position: fixed; top: 0; right: 0; bottom: 0; position: fixed; top: 0; right: 0; bottom: 0;
width: min(520px, 90vw); width: min(520px, 90vw);
background: var(--color-surface, #18181b); background: var(--color-surface);
border-left: 2px solid var(--color-primary, #6366f1); border-left: 2px solid var(--color-primary);
padding: 1.5rem; padding: 1.5rem;
overflow-y: auto; overflow-y: auto;
box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3); box-shadow: -8px 0 32px rgba(0, 0, 0, 0.3);
@@ -110,11 +110,11 @@ header h2 {
font-family: Fraunces, serif; font-style: italic; font-family: Fraunces, serif; font-style: italic;
} }
label { display: block; margin-bottom: 1rem; } label { display: block; margin-bottom: 1rem; }
.required { color: var(--color-primary, #6366f1); } .required { color: var(--color-primary); }
input, textarea { input, textarea {
width: 100%; margin-top: 0.25rem; width: 100%; margin-top: 0.25rem;
background: var(--color-bg, #111113); color: inherit; background: var(--color-bg); color: inherit;
border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px; border: 1px solid var(--color-border); border-radius: 6px;
padding: 0.5rem; font: inherit; padding: 0.5rem; font: inherit;
font-family: inherit; font-family: inherit;
} }
frontend/src/components/rules/RuleListPane.vue
+3 -3
View File
@@ -22,18 +22,18 @@ const emit = defineEmits<{
</template> </template>
<style scoped> <style scoped>
.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; } .pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; } header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
ul { list-style: none; padding: 0; margin: 1rem 0; } ul { list-style: none; padding: 0; margin: 1rem 0; }
li { li {
padding: 0.75rem; padding: 0.75rem;
cursor: pointer; cursor: pointer;
border-radius: 6px; border-radius: 6px;
border-left: 2px solid var(--color-primary, #6366f1); border-left: 2px solid var(--color-primary);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
} }
li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); } li:hover { background: var(--color-hover); }
.title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; } .title { font-family: Fraunces, serif; font-style: italic; font-size: 1.05em; }
.statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; } .statement { font-size: 0.9em; opacity: 0.8; margin-top: 0.25rem; }
.new-rule { cursor: pointer; } .new-rule { cursor: pointer; }
frontend/src/components/rules/RulebookDetailPane.vue
+6 -6
View File
@@ -122,7 +122,7 @@ watch(() => props.rulebookId, () => {/* re-render of isSubscribed from existing
</template> </template>
<style scoped> <style scoped>
.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; } .pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } header { display: flex; align-items: center; justify-content: space-between; gap: 1rem; }
header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; } header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
.always-on-toggle { .always-on-toggle {
@@ -133,18 +133,18 @@ header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem
.always-on-toggle input { cursor: pointer; } .always-on-toggle input { cursor: pointer; }
ul { list-style: none; padding: 0; margin: 1rem 0; } ul { list-style: none; padding: 0; margin: 1rem 0; }
li { padding: 0.5rem; cursor: pointer; border-radius: 6px; } li { padding: 0.5rem; cursor: pointer; border-radius: 6px; }
li.active { background: var(--color-primary-bg, rgba(99,102,241,0.15)); } li.active { background: var(--color-primary-bg); }
li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); } li:hover { background: var(--color-hover); }
.new-topic input { .new-topic input {
width: 100%; margin-bottom: 0.5rem; width: 100%; margin-bottom: 0.5rem;
background: var(--color-bg, #111113); color: inherit; background: var(--color-bg); color: inherit;
border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px; border: 1px solid var(--color-border); border-radius: 6px;
padding: 0.5rem; padding: 0.5rem;
} }
.form-buttons { display: flex; gap: 0.5rem; } .form-buttons { display: flex; gap: 0.5rem; }
.subscriptions { .subscriptions {
margin-top: 2rem; margin-top: 2rem;
border-top: 1px solid var(--color-border, #2a2a2e); border-top: 1px solid var(--color-border);
padding-top: 1rem; padding-top: 1rem;
} }
.subscriptions h3 { font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; } .subscriptions h3 { font-size: 0.9em; opacity: 0.7; text-transform: uppercase; letter-spacing: 0.05em; }
frontend/src/components/rules/RulebookListPane.vue
+7 -7
View File
@@ -48,27 +48,27 @@ async function submitNew() {
</template> </template>
<style scoped> <style scoped>
.pane { background: var(--color-surface, #18181b); padding: 1rem; overflow-y: auto; } .pane { background: var(--color-surface); padding: 1rem; overflow-y: auto; }
header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; } header h2 { font-family: Fraunces, serif; font-style: italic; margin: 0 0 0.5rem 0; }
ul { list-style: none; padding: 0; margin: 1rem 0; } ul { list-style: none; padding: 0; margin: 1rem 0; }
li { padding: 0.5rem; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 0.5rem; } li { padding: 0.5rem; cursor: pointer; border-radius: 6px; display: flex; align-items: center; gap: 0.5rem; }
li.active { background: var(--color-primary-bg, rgba(99,102,241,0.15)); } li.active { background: var(--color-primary-bg); }
li:hover { background: var(--color-hover, rgba(255,255,255,0.05)); } li:hover { background: var(--color-hover); }
.always-on-badge { .always-on-badge {
font-size: 0.7rem; font-size: 0.7rem;
text-transform: uppercase; text-transform: uppercase;
letter-spacing: 0.05em; letter-spacing: 0.05em;
padding: 0.1rem 0.4rem; padding: 0.1rem 0.4rem;
border-radius: 3px; border-radius: 3px;
background: var(--color-accent, rgba(91,74,138,0.25)); background: var(--color-accent);
color: var(--color-accent-fg, inherit); color: var(--color-accent-fg);
margin-left: auto; margin-left: auto;
} }
.new-rulebook { margin-top: 1rem; } .new-rulebook { margin-top: 1rem; }
.new-rulebook input { .new-rulebook input {
width: 100%; margin-bottom: 0.5rem; width: 100%; margin-bottom: 0.5rem;
background: var(--color-bg, #111113); color: inherit; background: var(--color-bg); color: inherit;
border: 1px solid var(--color-border, #2a2a2e); border-radius: 6px; border: 1px solid var(--color-border); border-radius: 6px;
padding: 0.5rem; padding: 0.5rem;
} }
.form-buttons { display: flex; gap: 0.5rem; } .form-buttons { display: flex; gap: 0.5rem; }
frontend/src/views/GraphView.vue
+2 -2
View File
@@ -600,7 +600,7 @@ onUnmounted(() => {
.graph-page { .graph-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--header-height, 52px)); height: calc(100vh - var(--header-height));
overflow: hidden; overflow: hidden;
} }
@@ -750,7 +750,7 @@ onUnmounted(() => {
background: var(--color-bg-card); background: var(--color-bg-card);
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md); border-radius: var(--radius-md);
box-shadow: 0 4px 16px var(--color-shadow, rgba(0, 0, 0, 0.15)); box-shadow: 0 4px 16px var(--color-shadow);
padding: 0.5rem 0.75rem; padding: 0.5rem 0.75rem;
pointer-events: none; pointer-events: none;
z-index: 10; z-index: 10;
frontend/src/views/KnowledgeView.vue
+13 -13
View File
@@ -490,7 +490,7 @@ onUnmounted(() => {
.knowledge-root { .knowledge-root {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: calc(100vh - var(--header-height, 56px)); height: calc(100vh - var(--header-height));
overflow: hidden; overflow: hidden;
} }
@@ -502,7 +502,7 @@ onUnmounted(() => {
gap: 12px; gap: 12px;
padding: 8px 20px; padding: 8px 20px;
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06)); border-bottom: 1px solid var(--color-border);
flex-shrink: 0; flex-shrink: 0;
font-size: 0.82rem; font-size: 0.82rem;
flex-wrap: wrap; flex-wrap: wrap;
@@ -539,7 +539,7 @@ onUnmounted(() => {
width: var(--sidebar-width); width: var(--sidebar-width);
flex-shrink: 0; flex-shrink: 0;
padding: 16px 12px; padding: 16px 12px;
border-right: 1px solid var(--color-border, rgba(255,255,255,0.06)); border-right: 1px solid var(--color-border);
overflow-y: auto; overflow-y: auto;
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
} }
@@ -683,7 +683,7 @@ onUnmounted(() => {
gap: 10px; gap: 10px;
padding: 12px 20px; padding: 12px 20px;
flex-shrink: 0; flex-shrink: 0;
border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06)); border-bottom: 1px solid var(--color-border);
} }
.search-wrap { .search-wrap {
flex: 1; flex: 1;
@@ -701,8 +701,8 @@ onUnmounted(() => {
width: 100%; width: 100%;
padding: 7px 12px 7px 32px; padding: 7px 12px 7px 32px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--color-border, rgba(255,255,255,0.1)); border: 1px solid var(--color-border);
background: var(--color-bg-tertiary, rgba(255,255,255,0.04)); background: var(--color-bg-tertiary);
color: var(--color-text); color: var(--color-text);
font-size: 0.88rem; font-size: 0.88rem;
outline: none; outline: none;
@@ -712,8 +712,8 @@ onUnmounted(() => {
.sort-select { .sort-select {
padding: 7px 10px; padding: 7px 10px;
border-radius: 8px; border-radius: 8px;
border: 1px solid var(--color-border, rgba(255,255,255,0.1)); border: 1px solid var(--color-border);
background: var(--color-bg-tertiary, rgba(255,255,255,0.04)); background: var(--color-bg-tertiary);
color: var(--color-text); color: var(--color-text);
font-size: 0.85rem; font-size: 0.85rem;
cursor: pointer; cursor: pointer;
@@ -735,9 +735,9 @@ onUnmounted(() => {
.k-card { .k-card {
position: relative; position: relative;
background: var(--color-surface, rgba(255,255,255,0.03)); background: var(--color-surface);
border: 1px solid var(--color-border, rgba(255,255,255,0.07)); border: 1px solid var(--color-border);
border-radius: var(--radius-lg, 14px); border-radius: var(--radius-lg);
padding: 14px; padding: 14px;
cursor: pointer; cursor: pointer;
transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s; transition: border-color 0.15s, transform 0.12s, box-shadow 0.15s;
@@ -917,7 +917,7 @@ onUnmounted(() => {
.graph-panel { .graph-panel {
width: 500px; width: 500px;
flex-shrink: 0; flex-shrink: 0;
border-left: 1px solid var(--color-border, rgba(255,255,255,0.06)); border-left: 1px solid var(--color-border);
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
@@ -933,7 +933,7 @@ onUnmounted(() => {
padding: 10px 14px; padding: 10px 14px;
font-size: 0.85rem; font-size: 0.85rem;
font-weight: 500; font-weight: 500;
border-bottom: 1px solid var(--color-border, rgba(255,255,255,0.06)); border-bottom: 1px solid var(--color-border);
flex-shrink: 0; flex-shrink: 0;
} }
/* Override GraphView's 100vh height so it fills the panel instead */ /* Override GraphView's 100vh height so it fills the panel instead */
frontend/src/views/NoteEditorView.vue
+3 -3
View File
@@ -709,8 +709,8 @@ onUnmounted(() => assist.clearSelection());
width: 100%; width: 100%;
padding: 5px 8px; padding: 5px 8px;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
border: 1px solid var(--color-input-border, rgba(255,255,255,0.12)); border: 1px solid var(--color-input-border);
background: var(--color-bg-tertiary, rgba(255,255,255,0.04)); background: var(--color-bg-tertiary);
color: var(--color-text); color: var(--color-text);
font-size: 0.82rem; font-size: 0.82rem;
font-family: inherit; font-family: inherit;
@@ -822,7 +822,7 @@ onUnmounted(() => assist.clearSelection());
background: var(--color-surface); background: var(--color-surface);
color: var(--color-text); color: var(--color-text);
/* Prompts are plain markdown — a code-style editor, not rich text. */ /* Prompts are plain markdown — a code-style editor, not rich text. */
font-family: var(--font-mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace); font-family: var(--font-mono);
font-size: 0.88rem; font-size: 0.88rem;
line-height: 1.55; line-height: 1.55;
tab-size: 2; tab-size: 2;
frontend/src/views/ProjectListView.vue
+1 -1
View File
@@ -563,7 +563,7 @@ function overallPct(project: Project): { total: number; pct: number } {
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: var(--color-overlay, rgba(0,0,0,0.45)); background: var(--color-overlay);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
frontend/src/views/ProjectView.vue
+12 -12
View File
@@ -847,9 +847,9 @@ async function confirmDelete() {
} }
.page-header-actions { display: flex; gap: 0.5rem; align-items: center; } .page-header-actions { display: flex; gap: 0.5rem; align-items: center; }
.plan-title-input { .plan-title-input {
background: var(--color-bg, #111113); background: var(--color-bg);
color: inherit; color: inherit;
border: 1px solid var(--color-border, #2a2a2e); border: 1px solid var(--color-border);
border-radius: 6px; border-radius: 6px;
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
font: inherit; font: inherit;
@@ -932,8 +932,8 @@ async function confirmDelete() {
flex-shrink: 0; flex-shrink: 0;
} }
.dot-todo { background: transparent; border: 2px solid var(--color-text-muted); } .dot-todo { background: transparent; border: 2px solid var(--color-text-muted); }
.dot-inprogress { background: var(--color-status-in-progress, #3b82f6); } .dot-inprogress { background: var(--color-status-in-progress); }
.dot-done { background: var(--color-status-done, #22c55e); } .dot-done { background: var(--color-status-done); }
.stat-todo { background: color-mix(in srgb, var(--color-text-muted) 8%, transparent); color: var(--color-text-secondary); border-color: var(--color-border); } .stat-todo { background: color-mix(in srgb, var(--color-text-muted) 8%, transparent); color: var(--color-text-secondary); border-color: var(--color-border); }
.stat-inprogress { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 28%, transparent); } .stat-inprogress { background: color-mix(in srgb, #3b82f6 10%, transparent); color: #3b82f6; border-color: color-mix(in srgb, #3b82f6 28%, transparent); }
@@ -1066,7 +1066,7 @@ async function confirmDelete() {
.ms-plan-rendered:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); } .ms-plan-rendered:hover { background: color-mix(in srgb, var(--color-primary) 4%, transparent); }
.ms-plan-editor { .ms-plan-editor {
width: 100%; width: 100%;
font-family: var(--font-mono, monospace); font-family: var(--font-mono);
font-size: 0.8rem; font-size: 0.8rem;
line-height: 1.5; line-height: 1.5;
padding: 0.5rem; padding: 0.5rem;
@@ -1133,7 +1133,7 @@ async function confirmDelete() {
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
} }
.ms-action-btn:hover { background: var(--color-bg-card); color: var(--color-text); } .ms-action-btn:hover { background: var(--color-bg-card); color: var(--color-text); }
.ms-action-delete:hover { color: var(--color-danger, #e74c3c); } .ms-action-delete:hover { color: var(--color-danger); }
.ms-rename-input { .ms-rename-input {
flex: 1; flex: 1;
@@ -1168,8 +1168,8 @@ async function confirmDelete() {
border-top: 3px solid; border-top: 3px solid;
} }
.col-todo { border-top-color: var(--color-border); } .col-todo { border-top-color: var(--color-border); }
.col-inprogress { border-top-color: var(--color-status-in-progress, #3b82f6); } .col-inprogress { border-top-color: var(--color-status-in-progress); }
.col-done { border-top-color: var(--color-status-done, #22c55e); } .col-done { border-top-color: var(--color-status-done); }
.kanban-col-header { .kanban-col-header {
display: flex; display: flex;
@@ -1230,7 +1230,7 @@ async function confirmDelete() {
transform: translateY(-2px); transform: translateY(-2px);
} }
/* Priority left-border colors */ /* Priority left-border colors */
.task-card.pri-high { border-left-color: var(--color-danger, #e74c3c); } .task-card.pri-high { border-left-color: var(--color-danger); }
.task-card.pri-medium { border-left-color: #f59e0b; } .task-card.pri-medium { border-left-color: #f59e0b; }
.task-card.pri-low { border-left-color: var(--color-success); } .task-card.pri-low { border-left-color: var(--color-success); }
@@ -1256,7 +1256,7 @@ async function confirmDelete() {
} }
.task-card:hover .task-advance-btn { opacity: 1; } .task-card:hover .task-advance-btn { opacity: 1; }
.task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-primary); color: var(--fs-text-on-action); } .task-advance-btn:hover { background: var(--color-action-primary); border-color: var(--color-action-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--done:hover { background: var(--color-success); border-color: var(--color-success); 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 {
@@ -1265,7 +1265,7 @@ async function confirmDelete() {
border-radius: 50%; border-radius: 50%;
flex-shrink: 0; flex-shrink: 0;
} }
.dot-pri-high { background: var(--color-danger, #e74c3c); } .dot-pri-high { background: var(--color-danger); }
.dot-pri-medium { background: #f59e0b; } .dot-pri-medium { background: #f59e0b; }
.dot-pri-low { background: var(--color-success); } .dot-pri-low { background: var(--color-success); }
@@ -1310,7 +1310,7 @@ async function confirmDelete() {
/* ── Modal ───────────────────────────────────────────────────── */ /* ── Modal ───────────────────────────────────────────────────── */
.modal-overlay { .modal-overlay {
position: fixed; inset: 0; position: fixed; inset: 0;
background: var(--color-overlay, rgba(0,0,0,0.45)); background: var(--color-overlay);
display: flex; align-items: center; justify-content: center; display: flex; align-items: center; justify-content: center;
z-index: 200; z-index: 200;
} }
frontend/src/views/RulesView.vue
+2 -2
View File
@@ -107,10 +107,10 @@ watch(() => route.query, syncFromRoute);
grid-template-columns: 280px 300px 1fr; grid-template-columns: 280px 300px 1fr;
height: 100vh; height: 100vh;
gap: 1px; gap: 1px;
background: var(--color-border, #2a2a2e); background: var(--color-border);
} }
.pane.empty { .pane.empty {
background: var(--color-surface, #18181b); background: var(--color-surface);
padding: 1rem; padding: 1rem;
opacity: 0.6; opacity: 0.6;
font-style: italic; font-style: italic;
frontend/src/views/SettingsView.vue
+10 -10
View File
@@ -2789,11 +2789,11 @@ function formatUserDate(iso: string): string {
color: var(--color-text-muted); color: var(--color-text-muted);
} }
.perm-granted { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); } .perm-granted { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.perm-denied { background: color-mix(in srgb, var(--color-danger, #e74c3c) 15%, transparent); color: var(--color-danger, #e74c3c); } .perm-denied { background: color-mix(in srgb, var(--color-danger) 15%, transparent); color: var(--color-danger); }
.sub-active { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); } .sub-active { background: color-mix(in srgb, var(--color-success) 15%, transparent); color: var(--color-success); }
.push-error { .push-error {
font-size: 0.82rem; font-size: 0.82rem;
color: var(--color-danger, #e74c3c); color: var(--color-danger);
margin: 0.25rem 0 0; margin: 0.25rem 0 0;
} }
@@ -3048,7 +3048,7 @@ function formatUserDate(iso: string): string {
.group-card { .group-card {
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px); border-radius: var(--radius-md);
overflow: hidden; overflow: hidden;
} }
@@ -3166,7 +3166,7 @@ function formatUserDate(iso: string): string {
padding: 0.15rem 0.4rem; padding: 0.15rem 0.4rem;
border-radius: 4px; border-radius: 4px;
} }
.role-owner { background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent); color: var(--color-warning, #f59e0b); } .role-owner { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.role-member { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); } .role-member { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
.members-empty { .members-empty {
@@ -3278,7 +3278,7 @@ function formatUserDate(iso: string): string {
} }
.api-key-value { .api-key-value {
flex: 1; flex: 1;
background: var(--color-surface-2, var(--color-surface)); background: var(--color-surface-2);
padding: 0.4rem 0.6rem; padding: 0.4rem 0.6rem;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.85rem; font-size: 0.85rem;
@@ -3396,7 +3396,7 @@ function formatUserDate(iso: string): string {
.mcp-code-row .btn-sm { white-space: nowrap; } .mcp-code-row .btn-sm { white-space: nowrap; }
.mcp-advanced { .mcp-advanced {
margin-top: 1.25rem; margin-top: 1.25rem;
border-top: 1px solid var(--color-border, rgba(255, 255, 255, 0.1)); border-top: 1px solid var(--color-border);
padding-top: 0.75rem; padding-top: 0.75rem;
} }
.mcp-advanced summary { .mcp-advanced summary {
@@ -3470,7 +3470,7 @@ function formatUserDate(iso: string): string {
flex: 1; flex: 1;
} }
.voice-library-id { .voice-library-id {
font-family: var(--font-mono, monospace); font-family: var(--font-mono);
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 500; font-weight: 500;
} }
@@ -3511,9 +3511,9 @@ function formatUserDate(iso: string): string {
border-radius: 999px; border-radius: 999px;
} }
.status-on { .status-on {
background: color-mix(in srgb, var(--color-success, #22c55e) 15%, transparent); background: color-mix(in srgb, var(--color-success) 15%, transparent);
color: var(--color-success, #22c55e); color: var(--color-success);
border: 1px solid color-mix(in srgb, var(--color-success, #22c55e) 40%, transparent); border: 1px solid color-mix(in srgb, var(--color-success) 40%, transparent);
} }
.status-off { .status-off {
background: color-mix(in srgb, var(--color-text-muted) 10%, transparent); background: color-mix(in srgb, var(--color-text-muted) 10%, transparent);
frontend/src/views/SharedWithMeView.vue
+1 -1
View File
@@ -244,7 +244,7 @@ onMounted(async () => {
} }
.perm-viewer { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); } .perm-viewer { background: color-mix(in srgb, var(--color-muted) 15%, transparent); color: var(--color-muted); }
.perm-editor { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); } .perm-editor { background: color-mix(in srgb, var(--color-primary) 15%, transparent); color: var(--color-primary); }
.perm-admin { background: color-mix(in srgb, var(--color-warning, #f59e0b) 15%, transparent); color: var(--color-warning, #f59e0b); } .perm-admin { background: color-mix(in srgb, var(--color-warning) 15%, transparent); color: var(--color-warning); }
.empty-msg { .empty-msg {
color: var(--color-muted); color: var(--color-muted);
frontend/src/views/SnippetDetailView.vue
+3 -3
View File
@@ -239,7 +239,7 @@ async function confirmDelete() {
} }
.snippet-name { .snippet-name {
margin: 0; margin: 0;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
font-size: 1.4rem; font-size: 1.4rem;
word-break: break-word; word-break: break-word;
} }
@@ -291,7 +291,7 @@ async function confirmDelete() {
} }
.meta-grid code, .meta-grid code,
.tag-row + * code { .tag-row + * code {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
font-size: 0.82rem; font-size: 0.82rem;
background: color-mix(in srgb, var(--color-primary) 12%, transparent); background: color-mix(in srgb, var(--color-primary) 12%, transparent);
color: var(--color-primary); color: var(--color-primary);
@@ -379,7 +379,7 @@ async function confirmDelete() {
overflow-x: auto; overflow-x: auto;
} }
.code-block code { .code-block code {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.85rem;
line-height: 1.6; line-height: 1.6;
color: var(--color-text); color: var(--color-text);
frontend/src/views/SnippetEditorView.vue
+2 -2
View File
@@ -447,7 +447,7 @@ function cancel() {
box-shadow: var(--focus-ring); box-shadow: var(--focus-ring);
} }
.mono { .mono {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
} }
.code-area { .code-area {
resize: vertical; resize: vertical;
@@ -542,7 +542,7 @@ function cancel() {
gap: 0.4rem; gap: 0.4rem;
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-left: 3px solid var(--color-warning, var(--color-primary)); border-left: 3px solid var(--color-warning);
border-radius: 8px; border-radius: 8px;
background: var(--color-bg-secondary); background: var(--color-bg-secondary);
} }
frontend/src/views/SnippetListView.vue
+10 -10
View File
@@ -574,7 +574,7 @@ function usageTitle(s: SnippetListItem): string {
background: var(--color-bg); background: var(--color-bg);
color: var(--color-text); color: var(--color-text);
font-size: 0.85rem; font-size: 0.85rem;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
box-sizing: border-box; box-sizing: border-box;
} }
.loc-input-wide { .loc-input-wide {
@@ -633,7 +633,7 @@ function usageTitle(s: SnippetListItem): string {
color: var(--color-text-muted); color: var(--color-text-muted);
} }
.empty-icon { .empty-icon {
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
font-size: 2rem; font-size: 2rem;
margin-bottom: 0.75rem; margin-bottom: 0.75rem;
opacity: 0.35; opacity: 0.35;
@@ -720,7 +720,7 @@ function usageTitle(s: SnippetListItem): string {
min-width: 0; min-width: 0;
flex: 1; flex: 1;
word-break: break-word; word-break: break-word;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
} }
/* Language tag — accent pill per the design system's tag treatment. */ /* Language tag — accent pill per the design system's tag treatment. */
@@ -770,7 +770,7 @@ function usageTitle(s: SnippetListItem): string {
padding: 0.85rem 1rem; padding: 0.85rem 1rem;
border: 1px solid var(--color-border); border: 1px solid var(--color-border);
border-radius: 8px; border-radius: 8px;
background: var(--color-surface-alt, var(--color-surface)); background: var(--color-surface-alt);
} }
.dup-empty, .dup-empty,
@@ -828,8 +828,8 @@ function usageTitle(s: SnippetListItem): string {
padding: 0.1rem 0.4rem; padding: 0.1rem 0.4rem;
border-radius: 4px; border-radius: 4px;
white-space: nowrap; white-space: nowrap;
background: color-mix(in srgb, var(--color-danger, #b91c1c) 15%, transparent); background: color-mix(in srgb, var(--color-danger) 15%, transparent);
color: var(--color-danger, #b91c1c); color: var(--color-danger);
} }
.usage-tag { .usage-tag {
@@ -845,8 +845,8 @@ function usageTitle(s: SnippetListItem): string {
/* Dead weight is a nudge, not an error — it warns in the warning colour rather /* Dead weight is a nudge, not an error — it warns in the warning colour rather
than the danger one, because the record isn't broken, just unearned. */ than the danger one, because the record isn't broken, just unearned. */
.usage-tag.usage-dead { .usage-tag.usage-dead {
background: color-mix(in srgb, var(--color-warning, #b45309) 18%, transparent); background: color-mix(in srgb, var(--color-warning) 18%, transparent);
color: var(--color-warning, #b45309); color: var(--color-warning);
} }
/* Header + select-mode */ /* Header + select-mode */
@@ -906,7 +906,7 @@ function usageTitle(s: SnippetListItem): string {
.modal-overlay { .modal-overlay {
position: fixed; position: fixed;
inset: 0; inset: 0;
background: var(--color-overlay, rgba(0, 0, 0, 0.45)); background: var(--color-overlay);
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -955,7 +955,7 @@ function usageTitle(s: SnippetListItem): string {
.merge-choice-name { .merge-choice-name {
flex: 1; flex: 1;
min-width: 0; min-width: 0;
font-family: var(--font-mono, ui-monospace, "JetBrains Mono", monospace); font-family: var(--font-mono);
font-size: 0.85rem; font-size: 0.85rem;
word-break: break-word; word-break: break-word;
} }
frontend/src/views/TaskEditorView.vue
+12 -12
View File
@@ -874,7 +874,7 @@ useEditorGuards(dirty, save);
padding: 0 0.2rem; padding: 0 0.2rem;
flex-shrink: 0; flex-shrink: 0;
} }
.btn-clear-parent:hover { color: var(--color-danger, #e74c3c); } .btn-clear-parent:hover { color: var(--color-danger); }
.parent-dropdown { .parent-dropdown {
position: absolute; position: absolute;
top: calc(100% + 4px); top: calc(100% + 4px);
@@ -1037,13 +1037,13 @@ useEditorGuards(dirty, save);
margin: 0.5rem 0 0.25rem; margin: 0.5rem 0 0.25rem;
} }
.task-goal-label { .task-goal-label {
font-family: var(--font-display, "Fraunces", serif); font-family: var(--font-display);
font-style: italic; font-style: italic;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--color-text-muted, rgba(255, 255, 255, 0.5)); color: var(--color-text-muted);
} }
.task-goal-input { .task-goal-input {
width: 100%; width: 100%;
@@ -1053,14 +1053,14 @@ useEditorGuards(dirty, save);
font: inherit; font: inherit;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.4; line-height: 1.4;
color: var(--color-text, inherit); color: var(--color-text);
background: var(--color-input-bg, rgba(255, 255, 255, 0.03)); background: var(--color-input-bg);
border: 1px solid var(--color-border, rgba(255, 255, 255, 0.08)); border: 1px solid var(--color-border);
border-radius: var(--radius-md, 8px); border-radius: var(--radius-md);
} }
.task-goal-input:focus { .task-goal-input:focus {
outline: none; outline: none;
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary);
} }
/* ── Auto-summary banner + re-consolidate button ─────────────────────────── */ /* ── Auto-summary banner + re-consolidate button ─────────────────────────── */
@@ -1072,13 +1072,13 @@ useEditorGuards(dirty, save);
margin-bottom: 0.5rem; margin-bottom: 0.5rem;
font-size: 0.82rem; font-size: 0.82rem;
font-style: italic; font-style: italic;
color: var(--color-text-muted, rgba(255, 255, 255, 0.6)); color: var(--color-text-muted);
background: rgba(99, 102, 241, 0.06); background: rgba(99, 102, 241, 0.06);
border-left: 2px solid var(--color-primary, #6366f1); border-left: 2px solid var(--color-primary);
border-radius: var(--radius-sm, 4px); border-radius: var(--radius-sm);
} }
.auto-summary-banner-editor .auto-summary-icon { .auto-summary-banner-editor .auto-summary-icon {
color: var(--color-primary, #6366f1); color: var(--color-primary);
font-style: normal; font-style: normal;
} }
</style> </style>
frontend/src/views/TaskViewerView.vue
+10 -10
View File
@@ -561,7 +561,7 @@ const subTaskProgress = computed(() => {
} }
.subtasks-fill { .subtasks-fill {
height: 100%; height: 100%;
background: var(--color-status-done, #22c55e); background: var(--color-status-done);
border-radius: 2px; border-radius: 2px;
transition: width 0.3s ease; transition: width 0.3s ease;
} }
@@ -602,13 +602,13 @@ const subTaskProgress = computed(() => {
border: 2px solid var(--color-text-muted); border: 2px solid var(--color-text-muted);
} }
.dot-in-progress { .dot-in-progress {
background: var(--color-status-in-progress, #3b82f6); background: var(--color-status-in-progress);
} }
.dot-done { .dot-done {
background: var(--color-status-done, #22c55e); background: var(--color-status-done);
} }
.dot-cancelled { .dot-cancelled {
background: var(--color-text-muted, #6b7280); background: var(--color-text-muted);
} }
.sub-title { .sub-title {
flex: 1; flex: 1;
@@ -749,26 +749,26 @@ const subTaskProgress = computed(() => {
/* ── Goal block + auto-summary banner ─────────────────────────────────────── */ /* ── Goal block + auto-summary banner ─────────────────────────────────────── */
.task-goal-display { .task-goal-display {
border-left: 2px solid var(--color-border, rgba(255, 255, 255, 0.12)); border-left: 2px solid var(--color-border);
padding: 0.4rem 0 0.4rem 0.9rem; padding: 0.4rem 0 0.4rem 0.9rem;
margin: 0.75rem 0 1.25rem; margin: 0.75rem 0 1.25rem;
background: rgba(255, 255, 255, 0.02); background: rgba(255, 255, 255, 0.02);
} }
.goal-label { .goal-label {
font-family: var(--font-display, "Fraunces", serif); font-family: var(--font-display);
font-style: italic; font-style: italic;
font-size: 0.78rem; font-size: 0.78rem;
font-weight: 500; font-weight: 500;
letter-spacing: 0.04em; letter-spacing: 0.04em;
text-transform: uppercase; text-transform: uppercase;
color: var(--color-text-muted, rgba(255, 255, 255, 0.5)); color: var(--color-text-muted);
margin: 0 0 0.25rem; margin: 0 0 0.25rem;
} }
.goal-text { .goal-text {
margin: 0; margin: 0;
font-size: 0.95rem; font-size: 0.95rem;
line-height: 1.45; line-height: 1.45;
color: var(--color-text, inherit); color: var(--color-text);
white-space: pre-wrap; white-space: pre-wrap;
} }
.auto-summary-banner { .auto-summary-banner {
@@ -777,11 +777,11 @@ const subTaskProgress = computed(() => {
gap: 0.5rem; gap: 0.5rem;
font-size: 0.78rem; font-size: 0.78rem;
font-style: italic; font-style: italic;
color: var(--color-text-muted, rgba(255, 255, 255, 0.55)); color: var(--color-text-muted);
margin: 0 0 0.75rem; margin: 0 0 0.75rem;
} }
.auto-summary-icon { .auto-summary-icon {
color: var(--color-primary, #6366f1); color: var(--color-primary);
font-size: 0.85rem; font-size: 0.85rem;
} }
</style> </style>
frontend/src/views/TrashView.vue
+1 -1
View File
@@ -68,7 +68,7 @@ onMounted(() => store.fetchTrash());
.batch-count { opacity: 0.6; font-weight: 400; font-size: 0.9em; margin-left: 0.35rem; } .batch-count { opacity: 0.6; font-weight: 400; font-size: 0.9em; margin-left: 0.35rem; }
.batch-meta { font-size: 0.82em; opacity: 0.6; margin-top: 0.25rem; } .batch-meta { font-size: 0.82em; opacity: 0.6; margin-top: 0.25rem; }
.batch-actions { display: flex; gap: 0.5rem; flex-shrink: 0; } .batch-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }
.batch-actions button { border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; border: 1px solid var(--color-border, #2a2a2e); background: none; color: inherit; } .batch-actions button { border-radius: 6px; padding: 0.35rem 0.7rem; cursor: pointer; border: 1px solid var(--color-border); background: none; color: inherit; }
.btn-restore:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); } .btn-restore:hover { border-color: var(--color-action-primary); color: var(--color-action-primary); }
.btn-purge:hover { border-color: var(--color-action-destructive); color: var(--color-action-destructive); } .btn-purge:hover { border-color: var(--color-action-destructive); color: var(--color-action-destructive); }
</style> </style>