siddharthd
831d30669b
ci / lint-test (push) Successful in 43s
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).
55 lines
1.4 KiB
CSS
55 lines
1.4 KiB
CSS
@import "tailwindcss";
|
|
|
|
/*
|
|
* 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;
|
|
}
|
|
}
|