feat: upgrade typography - Plus Jakarta Sans headings, JetBrains Mono data, 14px base

Heading font: Plus Jakarta Sans (500/600/700) for all h1-h3, stat values, dialog titles, timer display, and wordmark.
Body font: Inter (400/500/600/700) unchanged but base bumped from 13px to 14px.
Mono font: JetBrains Mono replaces IBM Plex Mono for code and tabular data.
This commit is contained in:
Your Name
2026-02-17 22:06:48 +02:00
parent 3c8868c899
commit a300d85f6f
10 changed files with 34 additions and 33 deletions

View File

@@ -1,6 +1,6 @@
<template>
<div class="p-6">
<h1 class="text-[1.5rem] font-medium text-text-primary mb-6">Reports</h1>
<h1 class="text-[1.75rem] font-bold font-[family-name:var(--font-heading)] tracking-tight text-text-primary mb-6">Reports</h1>
<!-- Date Range Selector -->
<div class="bg-bg-surface rounded-lg p-4 mb-6 flex flex-wrap items-end gap-4">
@@ -38,21 +38,21 @@
<div class="grid grid-cols-3 gap-6 mb-8">
<div>
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Total Hours</p>
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ formatHours(reportData.totalSeconds) }}</p>
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ formatHours(reportData.totalSeconds) }}</p>
</div>
<div>
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Earnings</p>
<p class="text-[1.25rem] font-mono text-accent-text font-medium">${{ reportData.totalEarnings?.toFixed(2) || '0.00' }}</p>
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">${{ reportData.totalEarnings?.toFixed(2) || '0.00' }}</p>
</div>
<div>
<p class="text-[0.6875rem] text-text-tertiary uppercase tracking-[0.08em] mb-1">Projects</p>
<p class="text-[1.25rem] font-mono text-accent-text font-medium">{{ reportData.byProject?.length || 0 }}</p>
<p class="text-[1.25rem] font-[family-name:var(--font-heading)] text-accent-text font-medium">{{ reportData.byProject?.length || 0 }}</p>
</div>
</div>
<!-- Chart -->
<div class="mb-8">
<h2 class="text-[1rem] font-medium text-text-primary mb-4">Hours by Project</h2>
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Hours by Project</h2>
<div class="h-64">
<Bar v-if="chartData" :data="chartData" :options="chartOptions" />
<div v-else class="flex flex-col items-center justify-center h-full">
@@ -64,7 +64,7 @@
<!-- Project Breakdown -->
<div>
<h2 class="text-[1rem] font-medium text-text-primary mb-4">Breakdown</h2>
<h2 class="text-[1.25rem] font-semibold font-[family-name:var(--font-heading)] text-text-primary mb-4">Breakdown</h2>
<div v-if="reportData.byProject && reportData.byProject.length > 0">
<div