Seven radii were in circulation (4/5/6/8/12/16px + pill) with no rule for
which went where; one toolbar row on /transactions mixed four shape
languages. This locks a 4-tier ladder (design.md convention 16):
- pill: interactive toolbar controls (buttons, chips, pickers, segmented
controls, toolbar search, count nubs)
- rounded-xl (12px): overlay tier: page panel, dialogs, slide-overs
- rounded-lg (8px): cards, form fields, popover/menu content, boxes
- rounded-sm (4px): nested leaves (menu items, checkboxes, kbd/code nubs)
Changes:
- New SegmentedControl primitive (pill-in-pill tablist, h-8) replaces the
hand-rolled bg-muted/70 tablist copied across 11 files
- New ToolbarSearch primitive (pill, h-8) adopted on 9 page toolbars;
dialog/picker searches keep the rounded-lg Input
- dialog.tsx 8px -> 12px, matching SettingsModal/slide-over/CommandPalette
- ContextPicker chips at the shared h-8 toolbar height
- ~300 rounded-md / bare rounded call sites remapped by role; auth icon
tiles and the mobile nav sheet come down from 16px to 12px
- rounded-md, bare rounded, rounded-2xl and rounded-[Npx] are dead
vocabulary, enforced by a new off-ladder-radius check in check:guards
Verified: lint 0 errors, 14422 unit tests pass, check:guards green, tsc
clean on all changed files, sandbox screenshots of transactions/
bookkeeping/granskning toolbars and the Ny verifikation dialog.
Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>
Raw palette: SalaryCalendar was the only file in the salary cluster still
on bg-red-100 / text-amber-800 style classes, with zero dark: variants, so
every absence pill rendered paper-white on a near-black page. All 30 are
now alpha-over-token on the semantic scale, which needs no dark: variant
(the approach badge.tsx already takes). Eight absence types share four
tones, so fill carries a second axis: filled vs outlined separates the
types whose Lucide icon is identical (Heart is parental, pregnancy and
care_relative; Activity is study and other_leave).
Primitives:
- select and dropdown-menu now scale from their trigger via the Radix
transform-origin variables instead of from their own middle. Dialog stays
centred: modals are not anchored to a trigger.
- toast used fade-out-80, the one animate-* class with no @utility in
globals.css, so --tw-exit-opacity fell back to 1 and the toast slid away
at full opacity. Enter and exit now also share one path per breakpoint
(top on mobile where the viewport is a full-width bar, right on desktop
where it is a corner card) using max-sm:/sm: rather than stacking both,
which would have produced a diagonal.
- slide-over exited on ease-in, which delays the moment the user has
already decided to leave; it enters on the drawer curve and now leaves
on it too.
- progress animated transition-all where only transform changes.
- One app-wide TooltipProvider in the root layout. skipDelayDuration is
provider-scoped, so a provider per instance meant the grace window could
never fire and every account number in a huvudbok re-paid the full 200ms.
Also: nine hand-rolled animate-pulse placeholders in three different greys
to the Skeleton primitive, 25 CardTitle text-lg to the locked text-base,
two always-on chips to muted text (a chip on every row is not an
exception), the three extensions titles onto the display face, the help
filter chips onto pill geometry, and the dead border-border/60 on the
/import row.
Co-authored-by: Claude Opus 5 (1M context) <noreply@anthropic.com>
* refactor(ui): form primitive polish + invoice page grid alignment
Three things that were dropped from the previous design-refresh squash
and one new fix on invoices/[id].
Form primitives — tighter focus rings, match Button transition cadence:
- Input/Textarea/Select trigger: transition-colors duration-200 → 150
- Focus ring: border-primary/{50,60} + ring-primary/{20,35} →
border-primary + ring-primary/20 (full-opacity border with a
faint glow ring; cleaner than the opacity-stacked version)
- SelectContent: border-border/60 → border-border, shadow-md →
halved --shadow-md token
- SelectSeparator: bg-border/50 → bg-border
invoices/new — single grid with explicit row placement so the
second-row cards (Anteckningar / Summering) align across columns
regardless of how tall the first-row cards end up:
- Flatten the two column wrappers into one grid
- Add lg:auto-rows-min lg:items-start
- Each card pinned with lg:col-{start,span} + lg:row-start
- Fakturarader now spans col 1-3 (full width) on lg+
invoices/[id] — same alignment fix on the detail view:
- Flatten the column wrappers into one grid
- Kund (col 1-2) + Fakturarader (col 1-2) + Anteckningar (col 1-2,
conditional) pinned to rows 1-3
- All right-side cards (Detaljer + conditional status cards) stay
grouped in a single wrapper at lg:col-start-3 lg:row-span-3, so
they stack naturally without disrupting the left-column rows
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
* refactor(ui): address PR review
- invoices/[id]: add lg:auto-rows-min to match invoices/new and prevent
unintended row expansion from any future auto-placed items
- Clean up stale indentation in both invoice pages — Card children
were 2 spaces too deep after the wrapper divs were removed
Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
---------
Co-authored-by: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
Add LICENSE (AGPL-3.0-or-later), CONTRIBUTING.md, SECURITY.md, DCO, and NOTICE files.
Rewrite README for open-source audience with self-hosting instructions.
Redesign color palette to grayscale chrome theme across all components.
Add transaction uncategorize API route with tests.
Fix VAT account name mismatches in migration 052.
Improve import page with SIE file support and loading skeleton.
Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
Jakob Wennberg