admin/accounted
3
0
Fork 0
Code Issues 1 Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(design): lock the border-radius ladder, one radius per role (#1607)

Browse Source 
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>
This commit is contained in:
Jakob Wennberg
2026-08-14 08:55:37 +02:00
committed by GitHub
co-authored by Jakob Wennberg Claude Fable 5
parent 18c20e68e6
commit 9686b54b41
130 changed files with 633 additions and 652 deletions
Download Patch File Download Diff File Expand all files Collapse all files
components/import/ArticlesEditStep.tsx
+3 -3
View File
@@ -140,7 +140,7 @@ export default function ArticlesEditStep({
)}
{/* Table */}
<div className="overflow-x-auto rounded-md border">
<div className="overflow-x-auto rounded-lg border">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<tr className="border-b">
@@ -244,7 +244,7 @@ export default function ArticlesEditStep({
{row.duplicate_match ? (
<span
className={cn(
'text-[11px] font-medium px-1.5 py-0.5 rounded',
'text-[11px] font-medium px-1.5 py-0.5 rounded-full',
updateDuplicates
? 'bg-muted text-warning'
: 'bg-muted text-muted-foreground',
@@ -254,7 +254,7 @@ export default function ArticlesEditStep({
{updateDuplicates ? 'Uppdateras' : 'Hoppas över'}
</span>
) : (
<span className="text-[11px] font-medium px-1.5 py-0.5 rounded bg-success/15 text-success">
<span className="text-[11px] font-medium px-1.5 py-0.5 rounded-full bg-success/15 text-success">
Ny
</span>
)}
components/import/BankFileColumnMappingStep.tsx
+2 -2
View File
@@ -186,7 +186,7 @@ export default function BankFileColumnMappingStep({
</CardHeader>
<CardContent className="space-y-6">
{/* Header row toggle */}
<div className="flex items-center justify-between rounded-md border p-4">
<div className="flex items-center justify-between rounded-lg border p-4">
<div className="space-y-0.5">
<Label htmlFor="has-header">Har filen rubrikrad?</Label>
<p className="text-xs text-muted-foreground">
@@ -382,7 +382,7 @@ export default function BankFileColumnMappingStep({
</CardDescription>
</CardHeader>
<CardContent>
<div className="rounded-md border max-h-64 overflow-x-auto overflow-y-auto">
<div className="rounded-lg border max-h-64 overflow-x-auto overflow-y-auto">
<Table>
<TableHeader>
<TableRow>
components/import/BankFilePreviewStep.tsx
+1 -1
View File
@@ -163,7 +163,7 @@ export default function BankFilePreviewStep({
</CardDescription>
</CardHeader>
<CardContent>
<div className="rounded-md border max-h-96 overflow-x-auto overflow-y-auto">
<div className="rounded-lg border max-h-96 overflow-x-auto overflow-y-auto">
<Table>
<TableHeader>
<TableRow>
components/import/BankFileResultStep.tsx
+1 -1
View File
@@ -58,7 +58,7 @@ export default function BankFileResultStep({
</CardHeader>
{!isSuccess && result.first_error && (
<CardContent>
<div className="rounded-md border border-destructive/30 bg-destructive/5 p-3 text-sm">
<div className="rounded-lg border border-destructive/30 bg-destructive/5 p-3 text-sm">
<p className="font-medium text-destructive">Databasfel</p>
<p className="mt-1 font-mono text-xs text-muted-foreground break-all">
{result.first_error.message}
components/import/CustomersEditStep.tsx
+3 -3
View File
@@ -119,7 +119,7 @@ export default function CustomersEditStep({
)}
{/* Table */}
<div className="overflow-x-auto rounded-md border">
<div className="overflow-x-auto rounded-lg border">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<tr className="border-b">
@@ -183,7 +183,7 @@ export default function CustomersEditStep({
{row.duplicate_match ? (
<span
className={cn(
'text-[11px] font-medium px-1.5 py-0.5 rounded',
'text-[11px] font-medium px-1.5 py-0.5 rounded-full',
updateDuplicates
? 'bg-muted text-warning'
: 'bg-muted text-muted-foreground',
@@ -193,7 +193,7 @@ export default function CustomersEditStep({
{updateDuplicates ? 'Uppdateras' : 'Hoppas över'}
</span>
) : (
<span className="text-[11px] font-medium px-1.5 py-0.5 rounded bg-success/15 text-success">
<span className="text-[11px] font-medium px-1.5 py-0.5 rounded-full bg-success/15 text-success">
Ny
</span>
)}
components/import/OpeningBalanceColumnMappingStep.tsx
+1 -1
View File
@@ -195,7 +195,7 @@ export default function OpeningBalanceColumnMappingStep({
{previewRows.length > 0 && (
<div className="space-y-2">
<Label className="text-muted-foreground">Förhandsgranskning (5 första raderna)</Label>
<div className="overflow-x-auto rounded-md border">
<div className="overflow-x-auto rounded-lg border">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<tr className="border-b">
components/import/OpeningBalanceRowEditor.tsx
+2 -2
View File
@@ -239,7 +239,7 @@ export default function OpeningBalanceRowEditor({
return (
<div className="space-y-4">
{/* Table */}
<div className="overflow-x-auto rounded-md border">
<div className="overflow-x-auto rounded-lg border">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<tr className="border-b">
@@ -284,7 +284,7 @@ export default function OpeningBalanceRowEditor({
{activeAutocomplete === row.id && autocompleteResults.length > 0 && (
<div
ref={autocompleteRef}
className="absolute z-50 top-full left-3 mt-1 w-72 max-h-48 overflow-y-auto rounded-md border bg-popover shadow-md"
className="absolute z-50 top-full left-3 mt-1 w-72 max-h-48 overflow-y-auto rounded-lg border bg-popover shadow-md"
>
{autocompleteResults.map((item) => (
<button
components/import/RegisterColumnMappingStep.tsx
+1 -1
View File
@@ -86,7 +86,7 @@ export default function RegisterColumnMappingStep<K extends string>({
{previewRows.length > 0 && (
<div className="space-y-2">
<Label className="text-muted-foreground">Förhandsgranskning (5 första raderna)</Label>
<div className="overflow-x-auto rounded-md border">
<div className="overflow-x-auto rounded-lg border">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<tr className="border-b">
components/import/SuppliersEditStep.tsx
+3 -3
View File
@@ -109,7 +109,7 @@ export default function SuppliersEditStep({
</div>
)}
<div className="overflow-x-auto rounded-md border">
<div className="overflow-x-auto rounded-lg border">
<table className="w-full text-sm">
<thead className="[&_th]:font-medium [&_th]:text-[11px] [&_th]:uppercase [&_th]:tracking-wider [&_th]:text-muted-foreground">
<tr className="border-b">
@@ -173,7 +173,7 @@ export default function SuppliersEditStep({
{row.duplicate_match ? (
<span
className={cn(
'text-[11px] font-medium px-1.5 py-0.5 rounded',
'text-[11px] font-medium px-1.5 py-0.5 rounded-full',
updateDuplicates
? 'bg-muted text-warning'
: 'bg-muted text-muted-foreground',
@@ -183,7 +183,7 @@ export default function SuppliersEditStep({
{updateDuplicates ? 'Uppdateras' : 'Hoppas över'}
</span>
) : (
<span className="text-[11px] font-medium px-1.5 py-0.5 rounded bg-success/15 text-success">
<span className="text-[11px] font-medium px-1.5 py-0.5 rounded-full bg-success/15 text-success">
Ny
</span>
)}