App-wide retheme done at the token layer: Tailwind's zinc scale is remapped to warm ink/paper neutrals and indigo to copper in globals.css, so every page inherits the palette. Fraunces (serif display) added for page titles and hero figures; all figures now render in mono with tabular numerals. Analytics page redesigned around a month spine — twelve clickable columns scaled to each month's spend that act as hero, context, and period navigation. Adds a 'What changed' top-movers panel vs the previous month, replaces the 8-line category trend chart with per-category sparkline small multiples, heat-tints the six-month ledger table, and restyles the Pareto, pace chart, and cashflow strip. Kept: Pareto, cumulative-vs-typical pace, drill-downs, regular/occasional split. Insights and Merchants restyled to the same kit; chart tokens centralised in category-colors.ts (CHART). Cleared the pre-existing lint errors in insights (typed tooltip, removed any-casts).
This commit is contained in:
+49
-1
@@ -1,6 +1,54 @@
|
||||
@import "tailwindcss";
|
||||
|
||||
@theme inline {
|
||||
/*
|
||||
* Ink & copper ledger theme.
|
||||
*
|
||||
* The whole app is written against Tailwind's zinc (neutrals) and indigo
|
||||
* (accent) scales, so the retheme happens here: zinc is remapped to warm
|
||||
* ink/paper tones and indigo to copper. Pages therefore inherit the palette
|
||||
* without per-page edits; chart hexes live in src/lib/category-colors.ts.
|
||||
*/
|
||||
@theme {
|
||||
--font-sans: var(--font-geist-sans);
|
||||
--font-mono: var(--font-geist-mono);
|
||||
--font-display: var(--font-fraunces), Georgia, serif;
|
||||
|
||||
/* Ink / paper neutrals (replaces zinc) */
|
||||
--color-zinc-950: #0f0d0a;
|
||||
--color-zinc-900: #171410;
|
||||
--color-zinc-800: #242019;
|
||||
--color-zinc-700: #332d23;
|
||||
--color-zinc-600: #4d4536;
|
||||
--color-zinc-500: #6e644f;
|
||||
--color-zinc-400: #94896f;
|
||||
--color-zinc-300: #b3a88e;
|
||||
--color-zinc-200: #d1c7af;
|
||||
--color-zinc-100: #e8e0cc;
|
||||
--color-zinc-50: #f3edde;
|
||||
|
||||
/* Copper accent (replaces indigo) */
|
||||
--color-indigo-950: #2a1708;
|
||||
--color-indigo-900: #3e2410;
|
||||
--color-indigo-800: #5c3517;
|
||||
--color-indigo-700: #7c4820;
|
||||
--color-indigo-600: #9c5b28;
|
||||
--color-indigo-500: #bc6f30;
|
||||
--color-indigo-400: #d28a47;
|
||||
--color-indigo-300: #e3a968;
|
||||
--color-indigo-200: #efc795;
|
||||
--color-indigo-100: #f7e2c4;
|
||||
}
|
||||
|
||||
::selection {
|
||||
background: #bc6f30;
|
||||
color: #0f0d0a;
|
||||
}
|
||||
|
||||
@media (prefers-reduced-motion: reduce) {
|
||||
*,
|
||||
*::before,
|
||||
*::after {
|
||||
animation-duration: 0.01ms !important;
|
||||
transition-duration: 0.01ms !important;
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user