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

fix(typography): strip chrome italic; reserve italic for emphasis

Browse Source 
Per the design rule "italic is for emphasis, not for design", removed
every chrome `font-style: italic` declaration across the frontend.
42 declarations gone across 24 files: empty-state placeholder copy,
loading messages, "no results" hints, ghost text, voice/role labels,
field placeholder text, brand wordmark, et al.

Markdown content emphasis is unaffected — `<em>` and `<i>` tags from
`*emphasis*` markup still render italic via browser default styling
(prose.css doesn't override em behavior). User-typed emphasis in
notes, journal entries, and chat messages keeps its italic.

Specific spots that lost the decorative italic:

- KnowledgeView .filter-label, .empty-narrator
- NoteEditorView .ef-label, link-suggest related
- ChatPanel .empty-msg, .empty-greeting, .role-label
- ChatMessage .role-assistant .role-label (the "Fable" voice tag —
  was italic per the doc's Illuminated Transcript spec, but per the
  new typography rule the speaker tag stays regular and lets the
  border-left + glow do the bubble framing on their own)
- AppHeader .brand-text ("Fabled" wordmark)
- editor-shared.css .title-input::placeholder
- ProjectView .project-title-input::placeholder
- HomeView .urgency-loading
- WorkspaceTaskPanel .empty-group
- WeatherCard .weather-unavailable
- SharedWithMeView .empty-msg
- DiffView empty-state spans
- ToolCallCard .tool-event-more
- SettingsView 7 spots (.you-label, .geo-pending, hint text, etc.)
- + several other empty-state / hint text spots

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
Bryan Van Deusen
2026-04-28 07:54:26 -04:00
parent 65ba1cc82a
commit 30dfbce426
24 changed files with 6 additions and 42 deletions
Download Patch File Download Diff File Expand all files Collapse all files
frontend/src/assets/editor-shared.css
-4
View File
@@ -120,7 +120,6 @@
}
.title-input::placeholder {
color: var(--color-text-muted);
font-style: italic;
font-weight: 400;
}
.editor-tabs {
@@ -370,7 +369,6 @@
.assist-streaming-label {
font-size: 0.8rem;
color: var(--color-text-secondary);
font-style: italic;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
@@ -399,7 +397,6 @@
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
text-align: center;
}
@@ -472,7 +469,6 @@
.diff-empty {
padding: 0.5rem;
color: var(--color-text-muted);
font-style: italic;
font-size: 0.82rem;
}
.assist-actions {
frontend/src/components/AppHeader.vue
-1
View File
@@ -172,7 +172,6 @@ router.afterEach(() => {
}
.brand-text {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-optical-sizing: auto;
font-weight: 500;
font-size: 1rem;
frontend/src/components/ChatMessage.vue
-1
View File
@@ -167,7 +167,6 @@ const timingParts = computed((): string[] => {
color: var(--color-primary);
font-family: 'Fraunces', Georgia, serif;
font-optical-sizing: auto;
font-style: italic;
font-size: 0.8rem;
text-transform: none;
letter-spacing: 0;
frontend/src/components/ChatPanel.vue
-3
View File
@@ -709,7 +709,6 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
text-align: center;
padding: 2rem 1rem;
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
}
.chat-empty-state {
@@ -724,7 +723,6 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
.empty-greeting {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-weight: 400;
font-size: 1.75rem;
color: var(--color-text-secondary);
@@ -828,7 +826,6 @@ defineExpose({ focus, prefill, send, contextCount, sidebarOpen, toggleContextSid
.widget-query {
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.widget-text {
font-size: 0.9rem;
frontend/src/components/DiffView.vue
-2
View File
@@ -124,7 +124,6 @@ function markerFor(type: DiffLine['type']): string {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
}
.diff-line {
@@ -153,7 +152,6 @@ function markerFor(type: DiffLine['type']): string {
.diff-collapse {
color: var(--color-text-muted);
opacity: 0.6;
font-style: italic;
border-top: 1px dashed var(--color-border);
border-bottom: 1px dashed var(--color-border);
padding-top: 0.2rem;
frontend/src/components/EventSlideOver.vue
-1
View File
@@ -452,7 +452,6 @@ async function doDelete() {
margin: 4px 0 0;
font-size: 0.75rem;
color: var(--color-text-secondary);
font-style: italic;
}
.toggle-btn {
frontend/src/components/HistoryPanel.vue
-1
View File
@@ -244,7 +244,6 @@ onMounted(loadVersions);
padding: 1rem;
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
}
.history-footer {
frontend/src/components/InlineAssistPanel.vue
-1
View File
@@ -151,7 +151,6 @@ const markers: Record<DiffLine["type"], string> = {
padding: 0.75rem;
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
}
/* ── Review ── */
frontend/src/components/NotificationsPanel.vue
-1
View File
@@ -152,6 +152,5 @@ onMounted(() => store.fetchAll())
text-align: center;
color: var(--color-muted);
font-size: 0.88rem;
font-style: italic;
}
</style>
frontend/src/components/ShareDialog.vue
-1
View File
@@ -410,7 +410,6 @@ onMounted(async () => {
.shares-empty {
color: var(--color-text-muted);
font-size: 0.85rem;
font-style: italic;
text-align: center;
padding: 0.75rem;
}
frontend/src/components/ToolCallCard.vue
+1 -2
View File
@@ -646,7 +646,7 @@ function closeEventSlideOver(changed = false) {
.tool-event-item { display: flex; justify-content: space-between; align-items: baseline; gap: 0.5rem; }
.tool-event-item-title { color: var(--color-text); font-size: 0.8rem; }
.tool-event-item-time { color: var(--color-text-muted); font-size: 0.75rem; white-space: nowrap; }
.tool-event-more { color: var(--color-text-muted); font-size: 0.75rem; font-style: italic; }
.tool-event-more { color: var(--color-text-muted); font-size: 0.75rem; }
.tool-deleted { text-decoration: line-through; opacity: 0.7; }
.tool-completed { text-decoration: line-through; color: var(--color-success, #2ecc71); }
@@ -705,7 +705,6 @@ function closeEventSlideOver(changed = false) {
.confirm-denied {
color: var(--color-text-muted);
font-size: 0.78rem;
font-style: italic;
}
.btn-confirm-duplicate {
padding: 0.15rem 0.5rem;
frontend/src/components/VersionHistorySection.vue
-1
View File
@@ -202,7 +202,6 @@ function restore() {
padding: 0.5rem 0.75rem;
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.vh-item {
frontend/src/components/WeatherCard.vue
-1
View File
@@ -273,6 +273,5 @@ function hasPrecip(day: ForecastDay): boolean {
.weather-unavailable {
color: var(--color-text-muted);
font-style: italic;
}
</style>
frontend/src/components/WorkspaceNoteEditor.vue
-3
View File
@@ -533,7 +533,6 @@ defineExpose({ reload: loadProjectNotes });
padding: 1rem 0.65rem;
font-size: 0.78rem;
color: var(--color-text-muted);
font-style: italic;
}
/* Note list */
@@ -710,7 +709,6 @@ defineExpose({ reload: loadProjectNotes });
justify-content: center;
color: var(--color-text-muted);
font-size: 0.85rem;
font-style: italic;
}
/* Editor UI */
@@ -766,7 +764,6 @@ defineExpose({ reload: loadProjectNotes });
.note-title-input:focus { outline: none; }
.note-title-input::placeholder {
color: var(--color-text-muted);
font-style: italic;
}
.tag-row {
frontend/src/components/WorkspaceTaskPanel.vue
+1 -1
View File
@@ -495,7 +495,7 @@ defineExpose({ reload: loadAll });
flex-shrink: 0;
}
.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--color-text-muted); font-style: italic; }
.empty-group { padding: 0.4rem 1.4rem; font-size: 0.78rem; color: var(--color-text-muted); }
.state-msg { padding: 1.5rem; text-align: center; font-size: 0.85rem; color: var(--color-text-muted); }
frontend/src/views/HomeView.vue
+1 -1
View File
@@ -771,7 +771,7 @@ function formatUpcomingTime(event: EventEntry): string {
background: color-mix(in srgb, #22c55e 12%, transparent);
color: #16a34a;
}
.urgency-loading { color: var(--color-text-muted); font-style: italic; }
.urgency-loading { color: var(--color-text-muted); }
/* ─── Inbox ──────────────────────────────────────────────────── */
.inbox-section {
frontend/src/views/KnowledgeView.vue
-2
View File
@@ -793,7 +793,6 @@ onUnmounted(() => {
}
.filter-label {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 0.95rem;
color: var(--color-primary);
margin-bottom: 8px;
@@ -1233,7 +1232,6 @@ onUnmounted(() => {
.empty-hint { font-size: 0.85rem; opacity: 0.7; }
.empty-narrator {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 1rem;
color: var(--color-text-secondary);
opacity: 0.85;
frontend/src/views/NoteEditorView.vue
-3
View File
@@ -895,7 +895,6 @@ onUnmounted(() => assist.clearSelection());
.stream-label {
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.stream-preview {
@@ -1036,7 +1035,6 @@ onUnmounted(() => assist.clearSelection());
}
.ef-label {
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 0.92rem;
color: var(--color-primary);
}
@@ -1070,7 +1068,6 @@ onUnmounted(() => assist.clearSelection());
border: none;
color: var(--color-primary);
font-family: 'Fraunces', Georgia, serif;
font-style: italic;
font-size: 0.85rem;
cursor: pointer;
padding: 4px 0;
frontend/src/views/ProjectView.vue
+1 -1
View File
@@ -768,7 +768,7 @@ async function confirmDelete() {
transition: border-color 0.15s;
}
.project-title-input:focus { border-bottom-color: var(--color-primary); }
.project-title-input::placeholder { color: var(--color-text-muted); font-weight: 400; font-style: italic; }
.project-title-input::placeholder { color: var(--color-text-muted); font-weight: 400; }
.status-badge {
font-size: 0.68rem;
frontend/src/views/SettingsView.vue
+2 -7
View File
@@ -3323,7 +3323,6 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
border-radius: 4px;
}
.not-configured {
font-style: italic;
opacity: 0.75;
}
.search-row {
@@ -3421,7 +3420,6 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
.push-unsupported {
font-size: 0.875rem;
color: var(--color-text-muted);
font-style: italic;
}
.push-status-row {
display: flex;
@@ -3567,7 +3565,7 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
color: var(--color-text-muted);
background: var(--color-bg-secondary);
}
.you-label { font-size: 0.8rem; color: var(--color-text-muted); font-style: italic; }
.you-label { font-size: 0.8rem; color: var(--color-text-muted); }
/* Per-row delete (users / invitations / etc.): ghost → Oxblood on hover */
.btn-delete {
padding: 0.25rem 0.6rem;
@@ -3772,7 +3770,6 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
.loading-msg, .empty-msg {
color: var(--color-text-muted);
font-style: italic;
font-size: 0.88rem;
padding: 0.5rem 0;
}
@@ -3934,7 +3931,6 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
.members-empty {
color: var(--color-text-muted);
font-style: italic;
font-size: 0.82rem;
padding: 0.25rem 0.5rem;
}
@@ -3951,7 +3947,7 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
}
.geo-ok { color: var(--color-success); }
.geo-error { color: var(--color-danger); }
.geo-pending { color: var(--color-text-muted); font-style: italic; }
.geo-pending { color: var(--color-text-muted); }
.unit-toggle {
display: flex;
@@ -4324,7 +4320,6 @@ FABLE_API_KEY={{ effectiveApiKey }}</pre>
.learned-empty {
font-size: 0.85rem;
color: var(--color-text-muted);
font-style: italic;
margin-bottom: 0.75rem;
}
.btn-danger-outline {
frontend/src/views/SharedWithMeView.vue
-1
View File
@@ -248,7 +248,6 @@ onMounted(async () => {
.empty-msg {
color: var(--color-muted);
font-style: italic;
font-size: 0.88rem;
margin: 0;
padding: 1rem 0;
frontend/src/views/TaskEditorView.vue
-1
View File
@@ -899,7 +899,6 @@ useEditorGuards(dirty, save);
.stream-label {
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.stream-preview {
border: 1px solid var(--color-input-border);
frontend/src/views/UserManagementView.vue
-1
View File
@@ -477,7 +477,6 @@ function formatDate(iso: string): string {
.you-label {
font-size: 0.8rem;
color: var(--color-text-muted);
font-style: italic;
}
.btn-delete {
padding: 0.25rem 0.6rem;
frontend/src/views/WorkspaceView.vue
-1
View File
@@ -183,7 +183,6 @@ onMounted(async () => {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-style: italic;
}
.ws-panel-toggles {