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

feat(theme): sweep indigo to violet across all remaining views and components

Browse Source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-04-08 12:12:46 -04:00
parent f30e90ef8d
commit 7e81e50e3e
15 changed files with 58 additions and 58 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/components/BriefingSetupWizard.vue
+2 -2
View File
@@ -247,7 +247,7 @@ async function finish() {
} }
.wizard-progress-fill { .wizard-progress-fill {
height: 100%; height: 100%;
background: linear-gradient(90deg, #6366f1, #4f46e5); background: linear-gradient(90deg, #7c3aed, #5b21b6);
transition: width 0.3s ease; transition: width 0.3s ease;
} }
.wizard-step-label { .wizard-step-label {
@@ -375,7 +375,7 @@ async function finish() {
} }
.btn-wizard-primary { .btn-wizard-primary {
padding: 0.5rem 1.25rem; padding: 0.5rem 1.25rem;
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
frontend/src/components/EventSlideOver.vue
+5 -5
View File
@@ -232,7 +232,7 @@ async function doDelete() {
<label class="so-label so-label-inline">Color</label> <label class="so-label so-label-inline">Color</label>
<div class="color-row"> <div class="color-row">
<input v-model="color" type="color" class="color-picker" title="Pick event color" /> <input v-model="color" type="color" class="color-picker" title="Pick event color" />
<input v-model="color" class="so-input color-hex" placeholder="#6366f1" /> <input v-model="color" class="so-input color-hex" placeholder="#7c3aed" />
<button v-if="color" type="button" class="btn-clear-color" @click="color = ''">✕</button> <button v-if="color" type="button" class="btn-clear-color" @click="color = ''">✕</button>
</div> </div>
</div> </div>
@@ -357,7 +357,7 @@ async function doDelete() {
box-sizing: border-box; box-sizing: border-box;
transition: border-color 0.15s; transition: border-color 0.15s;
} }
.so-input:focus { outline: none; border-color: var(--color-primary, #6366f1); } .so-input:focus { outline: none; border-color: var(--color-primary, #7c3aed); }
.so-textarea { resize: vertical; min-height: 5rem; font-family: inherit; } .so-textarea { resize: vertical; min-height: 5rem; font-family: inherit; }
@@ -376,8 +376,8 @@ async function doDelete() {
transition: all 0.15s; transition: all 0.15s;
} }
.toggle-btn.active { .toggle-btn.active {
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary, #7c3aed);
color: #fff; color: #fff;
} }
@@ -403,7 +403,7 @@ async function doDelete() {
} }
.btn-primary { .btn-primary {
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
frontend/src/components/InlineAssistPanel.vue
+5 -5
View File
@@ -94,10 +94,10 @@ const markers: Record<DiffLine["type"], string> = {
/* ── Streaming ── */ /* ── Streaming ── */
.iap-streaming { .iap-streaming {
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary, #7c3aed);
} }
.iap-streaming .iap-header { .iap-streaming .iap-header {
background: color-mix(in srgb, var(--color-primary, #6366f1) 8%, var(--color-bg-secondary)); background: color-mix(in srgb, var(--color-primary, #7c3aed) 8%, var(--color-bg-secondary));
} }
.iap-pulse { .iap-pulse {
@@ -105,7 +105,7 @@ const markers: Record<DiffLine["type"], string> = {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
flex-shrink: 0; flex-shrink: 0;
animation: iap-pulse 1.2s ease-in-out infinite; animation: iap-pulse 1.2s ease-in-out infinite;
} }
@@ -172,8 +172,8 @@ const markers: Record<DiffLine["type"], string> = {
font-family: inherit; font-family: inherit;
} }
.iap-btn-toggle:hover { .iap-btn-toggle:hover {
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary, #7c3aed);
color: var(--color-primary, #6366f1); color: var(--color-primary, #7c3aed);
} }
.iap-actions { .iap-actions {
frontend/src/components/NoteCard.vue
+3 -3
View File
@@ -64,11 +64,11 @@ function goEdit() {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
background: var(--color-bg-card); background: var(--color-bg-card);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(124, 58, 237, 0.06);
transition: box-shadow 0.2s, transform 0.18s ease; transition: box-shadow 0.2s, transform 0.18s ease;
} }
.note-card:hover { .note-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(124, 58, 237, 0.14);
transform: translateY(-2px); transform: translateY(-2px);
} }
@@ -89,7 +89,7 @@ function goEdit() {
} }
.note-card.compact:hover { .note-card.compact:hover {
box-shadow: none; box-shadow: none;
background: rgba(99, 102, 241, 0.04); background: rgba(124, 58, 237, 0.04);
transform: none; transform: none;
} }
.note-title-compact { .note-title-compact {
frontend/src/components/ShareDialog.vue
+1 -1
View File
@@ -337,7 +337,7 @@ onMounted(async () => {
.btn-add-share { .btn-add-share {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 6px; border-radius: 6px;
frontend/src/components/TagPill.vue
+1 -1
View File
@@ -40,7 +40,7 @@ defineEmits<{
} }
.tag-pill:hover { .tag-pill:hover {
color: var(--color-primary); color: var(--color-primary);
background: rgba(99, 102, 241, 0.08); background: rgba(124, 58, 237, 0.08);
} }
.dismiss { .dismiss {
background: none; background: none;
frontend/src/components/TaskCard.vue
+2 -2
View File
@@ -112,11 +112,11 @@ function isOverdue(): boolean {
text-decoration: none; text-decoration: none;
color: inherit; color: inherit;
background: var(--color-bg-card); background: var(--color-bg-card);
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(99, 102, 241, 0.06); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06), 0 0 0 1px rgba(124, 58, 237, 0.06);
transition: box-shadow 0.2s, transform 0.18s ease; transition: box-shadow 0.2s, transform 0.18s ease;
} }
.task-card:hover { .task-card:hover {
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(99, 102, 241, 0.14); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.10), 0 0 0 1px rgba(124, 58, 237, 0.14);
transform: translateY(-2px); transform: translateY(-2px);
} }
frontend/src/components/ToolCallCard.vue
+4 -4
View File
@@ -751,7 +751,7 @@ function closeEventSlideOver(changed = false) {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
flex-shrink: 0; flex-shrink: 0;
} }
@@ -773,14 +773,14 @@ function closeEventSlideOver(changed = false) {
} }
.tool-event-card.clickable { cursor: pointer; } .tool-event-card.clickable { cursor: pointer; }
.tool-event-card.clickable:hover { .tool-event-card.clickable:hover {
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary, #7c3aed);
background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, var(--color-bg-card, #16161a)); background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card, #16161a));
} }
.tool-event-card-dot { .tool-event-card-dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
flex-shrink: 0; flex-shrink: 0;
margin-top: 3px; margin-top: 3px;
} }
frontend/src/views/CalendarView.vue
+10 -10
View File
@@ -435,7 +435,7 @@ const upcomingGrouped = computed(() => {
} }
.btn-new-event { .btn-new-event {
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: 8px; border-radius: 8px;
@@ -482,8 +482,8 @@ const upcomingGrouped = computed(() => {
} }
:deep(.fc-button:hover), :deep(.fc-button:hover),
:deep(.fc-button-active) { :deep(.fc-button-active) {
background: var(--color-primary, #6366f1) !important; background: var(--color-primary, #7c3aed) !important;
border-color: var(--color-primary, #6366f1) !important; border-color: var(--color-primary, #7c3aed) !important;
color: #fff !important; color: #fff !important;
} }
:deep(.fc-button:focus) { box-shadow: none !important; } :deep(.fc-button:focus) { box-shadow: none !important; }
@@ -494,7 +494,7 @@ const upcomingGrouped = computed(() => {
font-size: 0.82rem; font-size: 0.82rem;
} }
:deep(.fc-daygrid-day.fc-day-today) { :deep(.fc-daygrid-day.fc-day-today) {
background: rgba(99, 102, 241, 0.08); background: rgba(124, 58, 237, 0.08);
} }
:deep(.fc-event) { :deep(.fc-event) {
border-radius: 4px; border-radius: 4px;
@@ -505,7 +505,7 @@ const upcomingGrouped = computed(() => {
} }
:deep(.fc-event-main) { color: #fff; } :deep(.fc-event-main) { color: #fff; }
:deep(.fc-event:not([style*="background"])) { :deep(.fc-event:not([style*="background"])) {
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
} }
:deep(.fc-daygrid-day-frame) { min-height: 5rem; } :deep(.fc-daygrid-day-frame) { min-height: 5rem; }
:deep(.fc-scrollgrid) { border-color: var(--color-border, #2a2b30); } :deep(.fc-scrollgrid) { border-color: var(--color-border, #2a2b30); }
@@ -574,8 +574,8 @@ const upcomingGrouped = computed(() => {
background: rgba(255,255,255,0.08); background: rgba(255,255,255,0.08);
} }
.picker-month.active { .picker-month.active {
background: rgba(99,102,241,0.22); background: rgba(124,58,237,0.22);
color: var(--color-primary, #818cf8); color: var(--color-primary, #a78bfa);
font-weight: 700; font-weight: 700;
} }
@@ -634,7 +634,7 @@ const upcomingGrouped = computed(() => {
.upcoming-card-accent { .upcoming-card-accent {
width: 4px; width: 4px;
flex-shrink: 0; flex-shrink: 0;
background: var(--ev-color, #6366f1); background: var(--ev-color, #7c3aed);
} }
.upcoming-card-body { .upcoming-card-body {
@@ -691,7 +691,7 @@ const upcomingGrouped = computed(() => {
.popover-accent { .popover-accent {
height: 4px; height: 4px;
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
} }
.popover-content { .popover-content {
@@ -750,7 +750,7 @@ const upcomingGrouped = computed(() => {
} }
.popover-btn:hover { opacity: 0.85; } .popover-btn:hover { opacity: 0.85; }
.popover-btn--edit { .popover-btn--edit {
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
color: #fff; color: #fff;
} }
.popover-btn--close { .popover-btn--close {
frontend/src/views/HomeView.vue
+9 -9
View File
@@ -569,7 +569,7 @@ function formatUpcomingTime(event: EventEntry): string {
border-radius: var(--radius-lg); border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem; padding: 1.25rem 1.5rem;
margin-bottom: 1.75rem; margin-bottom: 1.75rem;
box-shadow: 0 2px 16px rgba(99, 102, 241, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06); box-shadow: 0 2px 16px rgba(124, 58, 237, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
} }
.hero-top { .hero-top {
display: flex; display: flex;
@@ -605,20 +605,20 @@ function formatUpcomingTime(event: EventEntry): string {
align-items: center; align-items: center;
gap: 0.4rem; gap: 0.4rem;
padding: 0.55rem 1.1rem; padding: 0.55rem 1.1rem;
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
text-decoration: none; text-decoration: none;
font-size: 0.9rem; font-size: 0.9rem;
font-weight: 600; font-weight: 600;
white-space: nowrap; white-space: nowrap;
box-shadow: 0 1px 6px rgba(99, 102, 241, 0.3); box-shadow: 0 1px 6px rgba(124, 58, 237, 0.3);
transition: opacity 0.15s, box-shadow 0.15s; transition: opacity 0.15s, box-shadow 0.15s;
flex-shrink: 0; flex-shrink: 0;
} }
.btn-workspace-hero:hover { .btn-workspace-hero:hover {
opacity: 0.9; opacity: 0.9;
box-shadow: 0 3px 14px rgba(99, 102, 241, 0.45); box-shadow: 0 3px 14px rgba(124, 58, 237, 0.45);
} }
.hero-milestones { margin-bottom: 0.75rem; } .hero-milestones { margin-bottom: 0.75rem; }
@@ -760,8 +760,8 @@ function formatUpcomingTime(event: EventEntry): string {
font-weight: 500; font-weight: 500;
} }
.urgency-in-progress { .urgency-in-progress {
background: color-mix(in srgb, #6366f1 15%, transparent); background: color-mix(in srgb, #7c3aed 15%, transparent);
color: #6366f1; color: #7c3aed;
} }
.urgency-todo { .urgency-todo {
background: color-mix(in srgb, var(--color-text-muted) 12%, transparent); background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
@@ -892,14 +892,14 @@ function formatUpcomingTime(event: EventEntry): string {
width: 100%; width: 100%;
} }
.upcoming-event-card:hover { .upcoming-event-card:hover {
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary, #7c3aed);
background: color-mix(in srgb, var(--color-primary, #6366f1) 6%, var(--color-bg-card)); background: color-mix(in srgb, var(--color-primary, #7c3aed) 6%, var(--color-bg-card));
} }
.upcoming-event-dot { .upcoming-event-dot {
width: 8px; width: 8px;
height: 8px; height: 8px;
border-radius: 50%; border-radius: 50%;
background: var(--color-primary, #6366f1); background: var(--color-primary, #7c3aed);
flex-shrink: 0; flex-shrink: 0;
margin-top: 4px; margin-top: 4px;
} }
frontend/src/views/NoteEditorView.vue
+1 -1
View File
@@ -731,7 +731,7 @@ onUnmounted(() => assist.clearSelection());
transition: border-color 0.15s; transition: border-color 0.15s;
} }
.sb-select:focus, .sb-input:focus { .sb-select:focus, .sb-input:focus {
border-color: var(--color-primary, #6366f1); border-color: var(--color-primary, #7c3aed);
} }
/* Tag suggest row inside sidebar */ /* Tag suggest row inside sidebar */
frontend/src/views/NoteViewerView.vue
+3 -3
View File
@@ -350,17 +350,17 @@ async function convertToTask() {
padding: 0.45rem 1.1rem; padding: 0.45rem 1.1rem;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
transition: box-shadow 0.15s, opacity 0.15s; transition: box-shadow 0.15s, opacity 0.15s;
} }
.btn-edit:hover { .btn-edit:hover {
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
opacity: 0.95; opacity: 0.95;
color: #fff; color: #fff;
} }
frontend/src/views/ProjectView.vue
+6 -6
View File
@@ -676,17 +676,17 @@ async function confirmDelete() {
align-items: center; align-items: center;
gap: 0.35rem; gap: 0.35rem;
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: none;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
transition: box-shadow 0.15s, opacity 0.15s; transition: box-shadow 0.15s, opacity 0.15s;
} }
.btn-workspace:hover { box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); opacity: 0.95; color: #fff; } .btn-workspace:hover { box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42); opacity: 0.95; color: #fff; }
.btn-share { .btn-share {
padding: 0.4rem 0.8rem; padding: 0.4rem 0.8rem;
@@ -857,7 +857,7 @@ async function confirmDelete() {
.btn-save-panel { .btn-save-panel {
padding: 0.45rem 0.9rem; padding: 0.45rem 0.9rem;
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
@@ -866,10 +866,10 @@ async function confirmDelete() {
font-weight: 600; font-weight: 600;
font-family: inherit; font-family: inherit;
width: 100%; width: 100%;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.25); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.25);
transition: box-shadow 0.15s, opacity 0.15s; transition: box-shadow 0.15s, opacity 0.15s;
} }
.btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(99, 102, 241, 0.4); opacity: 0.95; } .btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); opacity: 0.95; }
.btn-save-panel:disabled { opacity: 0.45; cursor: default; } .btn-save-panel:disabled { opacity: 0.45; cursor: default; }
/* ── Content area ────────────────────────────────────────────── */ /* ── Content area ────────────────────────────────────────────── */
frontend/src/views/SettingsView.vue
+2 -2
View File
@@ -3024,7 +3024,7 @@ FABLE_API_KEY=&lt;your-api-key&gt;</pre>
} }
.sidebar-item.active { .sidebar-item.active {
color: var(--color-primary); color: var(--color-primary);
background: rgba(99, 102, 241, 0.08); background: rgba(124, 58, 237, 0.08);
border-left-color: var(--color-primary); border-left-color: var(--color-primary);
font-weight: 600; font-weight: 600;
} }
@@ -3489,7 +3489,7 @@ FABLE_API_KEY=&lt;your-api-key&gt;</pre>
} }
.sidebar-item.active { .sidebar-item.active {
border-bottom-color: var(--color-primary); border-bottom-color: var(--color-primary);
background: rgba(99, 102, 241, 0.08); background: rgba(124, 58, 237, 0.08);
} }
.settings-grid { .settings-grid {
grid-template-columns: 1fr; grid-template-columns: 1fr;
frontend/src/views/TaskViewerView.vue
+4 -4
View File
@@ -480,23 +480,23 @@ const subTaskProgress = computed(() => {
padding: 0.45rem 1.1rem; padding: 0.45rem 1.1rem;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
text-decoration: none; text-decoration: none;
cursor: pointer; cursor: pointer;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
box-shadow: 0 2px 8px rgba(99, 102, 241, 0.28); box-shadow: 0 2px 8px rgba(124, 58, 237, 0.28);
transition: box-shadow 0.15s, opacity 0.15s; transition: box-shadow 0.15s, opacity 0.15s;
} }
.btn-edit:hover { .btn-edit:hover {
box-shadow: 0 4px 14px rgba(99, 102, 241, 0.42); box-shadow: 0 4px 14px rgba(124, 58, 237, 0.42);
opacity: 0.95; opacity: 0.95;
color: #fff; color: #fff;
} }
.btn-advance { .btn-advance {
padding: 0.45rem 1rem; padding: 0.45rem 1rem;
background: linear-gradient(135deg, #6366f1, #4f46e5); background: linear-gradient(135deg, #7c3aed, #5b21b6);
color: #fff; color: #fff;
border: none; border: none;
border-radius: var(--radius-sm); border-radius: var(--radius-sm);