fix(typography): strip chrome italic; reserve italic for emphasis
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:
@@ -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 {
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -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 {
|
||||
|
||||
@@ -248,7 +248,6 @@ onMounted(async () => {
|
||||
|
||||
.empty-msg {
|
||||
color: var(--color-muted);
|
||||
font-style: italic;
|
||||
font-size: 0.88rem;
|
||||
margin: 0;
|
||||
padding: 1rem 0;
|
||||
|
||||
@@ -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);
|
||||
|
||||
@@ -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;
|
||||
|
||||
@@ -183,7 +183,6 @@ onMounted(async () => {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.ws-panel-toggles {
|
||||
|
||||
Reference in New Issue
Block a user