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

feat(design): foundation pass — dusty violet palette, warm parchment light, Inter + JetBrains Mono

Browse Source 
Applies the FabledSword + Scribe iteration palette to theme.css end to
end: indigo (#7c3aed) → dusty violet (#5B4A8A) accent, cool grey →
Obsidian/Iron/Pewter dark surfaces, warm parchment (#F5F1E8) light
mode, Inter body + JetBrains Mono code loaded alongside Fraunces, and
neutral hairline scrollbars (chrome is structural, not branded).

Adds the action token set (--color-action-primary Moss,
--color-action-secondary Bronze, --color-action-destructive Oxblood,
--color-action-ghost-border Pewter) but does not yet reclassify any
buttons — surface-phase work. Buttons remain dusty-violet gradients in
the meantime, by design.

Removes deprecated --color-accent-warm; replaces concrete usages with
--color-text-secondary (dates, flavor copy) or --color-warning (paused
status). Sweeps hardcoded indigo literals in component scoped CSS so
they don't bypass the token system.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-04-27 17:20:01 -04:00
parent 057b30b89e
commit 7a9a8b7819
15 changed files with 197 additions and 163 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/views/CalendarView.vue
+2 -2
View File
@@ -574,7 +574,7 @@ const upcomingGrouped = computed(() => {
background: rgba(255,255,255,0.08);
}
.picker-month.active {
background: rgba(124,58,237,0.22);
background: rgba(91, 74, 138,0.22);
color: var(--color-primary);
font-weight: 700;
}
@@ -634,7 +634,7 @@ const upcomingGrouped = computed(() => {
.upcoming-card-accent {
width: 4px;
flex-shrink: 0;
background: var(--ev-color, #7c3aed);
background: var(--ev-color, #5B4A8A);
}
.upcoming-card-body {
frontend/src/views/ChatView.vue
+3 -3
View File
@@ -520,7 +520,7 @@ onUnmounted(() => {
.btn-new-conv--full { width: 100%; }
.btn-new-conv:hover {
opacity: 0.9;
box-shadow: 0 0 14px rgba(129, 140, 248, 0.35);
box-shadow: 0 0 14px rgba(91, 74, 138, 0.35);
}
.sidebar-search-row {
@@ -612,7 +612,7 @@ onUnmounted(() => {
border-left: 3px solid transparent;
transition: background 0.15s, border-color 0.15s;
}
.conv-item:hover { background: rgba(99,102,241,0.05); border-left-color: var(--color-primary); }
.conv-item:hover { background: rgba(91, 74, 138,0.05); border-left-color: var(--color-primary); }
.conv-item.active {
background: color-mix(in srgb, var(--color-primary) 15%, transparent);
color: var(--color-primary);
@@ -704,7 +704,7 @@ onUnmounted(() => {
50% {
border-color: var(--color-primary);
color: var(--color-primary);
box-shadow: 0 0 6px rgba(99, 102, 241, 0.4);
box-shadow: 0 0 6px rgba(91, 74, 138, 0.4);
}
}
.scope-dot { font-size: 0.6rem; }
frontend/src/views/HomeView.vue
+5 -5
View File
@@ -569,7 +569,7 @@ function formatUpcomingTime(event: EventEntry): string {
border-radius: var(--radius-lg);
padding: 1.25rem 1.5rem;
margin-bottom: 1.75rem;
box-shadow: 0 2px 16px rgba(124, 58, 237, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
box-shadow: 0 2px 16px rgba(91, 74, 138, 0.08), 0 1px 4px rgba(0, 0, 0, 0.06);
}
.hero-top {
display: flex;
@@ -612,13 +612,13 @@ function formatUpcomingTime(event: EventEntry): string {
font-size: 0.9rem;
font-weight: 600;
white-space: nowrap;
box-shadow: 0 1px 6px rgba(124, 58, 237, 0.3);
box-shadow: 0 1px 6px rgba(91, 74, 138, 0.3);
transition: opacity 0.15s, box-shadow 0.15s;
flex-shrink: 0;
}
.btn-workspace-hero:hover {
opacity: 0.9;
box-shadow: 0 3px 14px rgba(124, 58, 237, 0.45);
box-shadow: 0 3px 14px rgba(91, 74, 138, 0.45);
}
.hero-milestones { margin-bottom: 0.75rem; }
@@ -760,8 +760,8 @@ function formatUpcomingTime(event: EventEntry): string {
font-weight: 500;
}
.urgency-in-progress {
background: color-mix(in srgb, #7c3aed 15%, transparent);
color: #7c3aed;
background: color-mix(in srgb, #5B4A8A 15%, transparent);
color: #5B4A8A;
}
.urgency-todo {
background: color-mix(in srgb, var(--color-text-muted) 12%, transparent);
frontend/src/views/KnowledgeView.vue
+15 -15
View File
@@ -720,17 +720,17 @@ onUnmounted(() => {
gap: 5px;
padding: 3px 10px;
border-radius: 20px;
background: rgba(124, 58, 237, 0.1);
border: 1px solid rgba(124, 58, 237, 0.2);
background: rgba(91, 74, 138, 0.1);
border: 1px solid rgba(91, 74, 138, 0.2);
color: var(--color-text);
text-decoration: none;
transition: background 0.15s;
}
.today-event-chip:hover { background: rgba(124, 58, 237, 0.18); }
.today-event-chip:hover { background: rgba(91, 74, 138, 0.18); }
.chip-dot {
width: 6px; height: 6px;
border-radius: 50%;
background: #7c3aed;
background: #5B4A8A;
flex-shrink: 0;
}
.chip-date { color: var(--color-muted); font-size: 0.78rem; }
@@ -775,7 +775,7 @@ onUnmounted(() => {
content: '· · ·';
display: block;
text-align: center;
color: rgba(124, 58, 237, 0.3);
color: rgba(91, 74, 138, 0.3);
font-size: 0.9rem;
letter-spacing: 0.4em;
padding: 4px 0 12px;
@@ -891,7 +891,7 @@ onUnmounted(() => {
flex-shrink: 0;
}
.filter-btn.active .filter-count {
background: rgba(124, 58, 237, 0.2);
background: rgba(91, 74, 138, 0.2);
color: var(--color-primary);
}
.filter-tag { font-size: 0.78rem; }
@@ -965,7 +965,7 @@ onUnmounted(() => {
.btn-graph:hover { color: var(--color-text); border-color: rgba(255,255,255,0.2); }
.btn-graph.active {
background: var(--color-primary-wash);
border-color: rgba(124, 58, 237, 0.35);
border-color: rgba(91, 74, 138, 0.35);
color: var(--color-primary);
}
@@ -998,12 +998,12 @@ onUnmounted(() => {
}
.k-card:hover {
transform: translateY(-2px);
box-shadow: 0 8px 28px rgba(124, 58, 237, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
border-color: rgba(124, 58, 237, 0.35);
box-shadow: 0 8px 28px rgba(91, 74, 138, 0.25), 0 2px 8px rgba(0, 0, 0, 0.3);
border-color: rgba(91, 74, 138, 0.35);
}
/* Type-specific card DNA */
.k-card--note { border-color: rgba(124, 58, 237, 0.20); }
.k-card--note { border-color: rgba(91, 74, 138, 0.20); }
.k-card--task { border-color: rgba(212, 160, 23, 0.18); }
.k-card--person { border-color: rgba(16, 185, 129, 0.18); }
.k-card--place { border-color: rgba(245, 158, 11, 0.18); }
@@ -1022,7 +1022,7 @@ onUnmounted(() => {
}
.k-card--note::before {
right: 0;
background: linear-gradient(90deg, #7c3aed, #a78bfa);
background: linear-gradient(90deg, #5B4A8A, #7A6DA8);
}
.k-card--task::before {
right: 0;
@@ -1060,7 +1060,7 @@ onUnmounted(() => {
text-transform: uppercase;
letter-spacing: 0.04em;
}
.badge--note { background: rgba(99,102,241,0.15); color: #a78bfa; }
.badge--note { background: rgba(91, 74, 138,0.15); color: #7A6DA8; }
.badge--person { background: rgba(16,185,129,0.15); color: #34d399; }
.badge--place { background: rgba(245,158,11,0.15); color: #fbbf24; }
.badge--list { background: rgba(56,189,248,0.15); color: #7dd3fc; }
@@ -1165,7 +1165,7 @@ onUnmounted(() => {
background: rgba(255,255,255,0.05);
color: var(--color-muted);
}
.k-card-date { font-size: 0.72rem; color: var(--color-accent-warm); white-space: nowrap; opacity: 0.7; }
.k-card-date { font-size: 0.72rem; color: var(--color-text-secondary); white-space: nowrap; opacity: 0.7; }
/* ── Task card ──────────────────────────────────────────── */
.k-card-task {
@@ -1201,7 +1201,7 @@ onUnmounted(() => {
.task-due {
font-size: 0.78rem;
color: var(--color-accent-warm);
color: var(--color-text-secondary);
}
.task-overdue {
color: var(--color-overdue);
@@ -1225,7 +1225,7 @@ onUnmounted(() => {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 1rem;
color: var(--color-accent-warm);
color: var(--color-text-secondary);
opacity: 0.85;
}
frontend/src/views/ProjectView.vue
+2 -2
View File
@@ -763,7 +763,7 @@ async function confirmDelete() {
flex-shrink: 0;
}
.status-active { background: color-mix(in srgb, var(--color-success) 14%, transparent); color: var(--color-success); border: 1px solid color-mix(in srgb, var(--color-success) 30%, transparent); }
.status-paused { background: color-mix(in srgb, var(--color-accent-warm) 14%, transparent); color: var(--color-accent-warm); border: 1px solid color-mix(in srgb, var(--color-accent-warm) 30%, transparent); }
.status-paused { background: color-mix(in srgb, var(--color-warning) 14%, transparent); color: var(--color-warning); border: 1px solid color-mix(in srgb, var(--color-warning) 30%, transparent); }
.status-completed { background: color-mix(in srgb, var(--color-primary) 14%, transparent); color: var(--color-primary); border: 1px solid color-mix(in srgb, var(--color-primary) 30%, transparent); }
.status-archived { background: color-mix(in srgb, var(--color-text-muted) 14%, transparent); color: var(--color-text-muted); border: 1px solid color-mix(in srgb, var(--color-text-muted) 30%, transparent); }
@@ -881,7 +881,7 @@ async function confirmDelete() {
box-shadow: var(--glow-soft);
transition: box-shadow 0.15s, opacity 0.15s;
}
.btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(124, 58, 237, 0.4); opacity: 0.95; }
.btn-save-panel:hover:not(:disabled) { box-shadow: 0 4px 12px rgba(91, 74, 138, 0.4); opacity: 0.95; }
.btn-save-panel:disabled { opacity: 0.45; cursor: default; }
/* ── Content area ────────────────────────────────────────────── */
frontend/src/views/SettingsView.vue
+1 -1
View File
@@ -2797,7 +2797,7 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
}
.sidebar-item.active {
color: var(--color-primary);
background: rgba(124, 58, 237, 0.08);
background: rgba(91, 74, 138, 0.08);
border-left-color: var(--color-primary);
font-weight: 600;
}