refactor(design): no amber boxes, attention is one ochre sentence (#1562)

The founder wants the yellow boxes gone everywhere. The design system
already agreed: status colors are data, not chrome (convention 12) and
attention is a single ochre sentence, never a banner (convention 6).
This enforces it:

- ConfirmationDialog: the amber warning panel is now an AttnLine, and
  the hardcoded Swedish default warningText is gone: it injected an
  immutability warning into dialogs whose authors never asked for one
  (every current caller passes the prop explicitly, so no behavior
  change at any call site).
- Badge warning variant: amber fill replaced with a hairline chip and
  ochre text.
- DestructiveConfirmDialog warning variant: neutral icon disc, default
  primary confirm button (only --destructive survives as chrome).
- BankSyncStatusChip stale state: same neutral shape as the healthy
  chip, ochre text carries the signal.
- SandboxBanner: solid amber bar becomes secondary-on-border chrome.
- BankIdAuth, BankIdCompanyPicker, SessionTimeoutModal: the last three
  raw-amber (bg-amber-*) holdouts moved onto tokens, the company-picker
  banner becoming a plain AttnLine.
- Mechanical sweep of the ~58 hand-rolled bg-warning/border-warning
  boxes across 45 files: fills to bg-muted/30 (icon discs bg-muted),
  borders to border-border, text-warning-foreground to text-attn. The
  account-class dots in account-number.tsx keep bg-warning: they are
  data indicators, not chrome.

Co-authored-by: Jakob Wennberg <311770904+jakobwennberg-oss@users.noreply.github.com>
Co-authored-by: Claude Fable 5 <noreply@anthropic.com>

components/ui/badge.tsx

@@ -18,8 +18,10 @@ const badgeVariants = cva(
           "border-border text-foreground bg-transparent",
         success:
           "border-transparent bg-success/10 text-success",
+        // No amber fill: status colors are data, not chrome (convention 12).
+        // The exception reads through the ochre text on a hairline chip.
         warning:
-          "border-transparent bg-warning/15 text-warning-foreground",
+          "border-border bg-transparent text-attn",
       },
     },
     defaultVariants: {

components/ui/confirmation-dialog.tsx

@@ -10,7 +10,8 @@ import {
   DialogFooter,
 } from '@/components/ui/dialog'
 import { Button } from '@/components/ui/button'
-import { ClipboardCheck, Loader2, AlertTriangle } from 'lucide-react'
+import { AttnLine } from '@/components/ui/attn-line'
+import { ClipboardCheck, Loader2 } from 'lucide-react'
 
 interface ConfirmationDialogProps {
   open: boolean
@@ -33,7 +34,10 @@ export function ConfirmationDialog({
   onConfirm,
   isSubmitting,
   title,
-  warningText = 'En verifikation skapas och kan inte ändras efteråt.',
+  // No default warning: an accounting-immutability sentence used to be baked
+  // in here, which put it into dialogs whose authors never asked for one.
+  // Callers that commit a voucher directly pass their own warningText.
+  warningText,
   confirmLabel = 'Bekräfta & skapa',
   extraActions,
   children,
@@ -66,12 +70,8 @@ export function ConfirmationDialog({
         </div>
 
         <div className="border-t px-4 sm:px-6 py-3 sm:py-4 space-y-3 sm:space-y-4 shrink-0">
-          {warningText && (
-            <div className="flex items-start gap-2 rounded-lg bg-warning/10 border border-warning/30 p-3">
-              <AlertTriangle className="h-4 w-4 text-warning-foreground mt-0.5 shrink-0" />
-              <p className="text-sm text-warning-foreground">{warningText}</p>
-            </div>
-          )}
+          {/* Attention is one ochre sentence, not a banner (convention 6). */}
+          {warningText && <AttnLine>{warningText}</AttnLine>}
 
           <DialogFooter>
             <Button

components/ui/destructive-confirm-dialog.tsx

@@ -62,7 +62,7 @@ export function DestructiveConfirmDialog({
                 'flex-shrink-0 flex items-center justify-center h-10 w-10 rounded-full',
                 variant === 'destructive'
                   ? 'bg-destructive/10 text-destructive'
-                  : 'bg-warning/10 text-warning'
+                  : 'bg-muted text-attn'
               )}
             >
               <AlertTriangle className="h-5 w-5" />
@@ -87,14 +87,13 @@ export function DestructiveConfirmDialog({
           >
             {cancelLabel}
           </Button>
+          {/* Warning-variant confirms use the default primary button: in
+              chrome only --destructive survives as a colored action. */}
           <Button
             variant={variant === 'destructive' ? 'destructive' : 'default'}
             onClick={handleConfirm}
             disabled={isLoading}
-            className={cn(
-              'min-h-11 w-full sm:w-auto',
-              variant === 'warning' && 'bg-warning hover:bg-warning/90 text-warning-foreground'
-            )}
+            className="min-h-11 w-full sm:w-auto"
           >
             {isLoading ? (
               <Loader2 className="mr-2 h-4 w-4 animate-spin" />