feat(rvo): upgrade @nl-rvo component-library-css 4.20.2 + design-tokens 2.4.1 (button-migratie) (#382)

Migreert de RVO button-classes mee: component-library-css 4.16 verving
.utrecht-button door .rvo-button met een nieuw modifier-schema. Zonder deze
migratie zouden alle buttons in beide apps ongestyled (native) renderen.

Class-migratie (utrecht-button* -> rvo-button*):
- --primary-action -> --primary, --secondary-action -> --secondary
- --rvo-tertiary-action -> --tertiary, --rvo-quaternary-action -> --quaternary
- --rvo-md/--rvo-xs -> --size-md/--size-xs, --rvo-full-width -> --full-width
- --warning -> --warning, --icon-gap -> --icon-before/--icon-after (per positie)
- utrecht-button-group -> rvo-action-group

Verwijderde classes in 4.20.2 die wij gebruikten (door review gevonden, gefixt):
- a.rvo-button kleur: var(--_utrecht-button-color) bestaat niet meer ->
  var(--rvo-button-color) (anders donker-op-donker op de standalone-download-CTA)
- rvo-heading--mixed -> rvo-heading--normal (4 accordion-titels; anders vet i.p.v.
  normaal). Beide zijn font-weight: var(--rvo-font-weight-normal), exact equivalent.

Overig:
- UiButton.vue: dynamische class-constructie aangepast
- base.css/app.css: button-selectors gemigreerd; icon-gap-override naar
  icon-before/after; dode .utrecht-button--align-content regel verwijderd;
  --rvo-color-logoblauw -> --rvo-color-lintblauw (logoblauw hernoemd in dt 2.0)
- SaveForm.vue: pre-existing typo rvo-action-groul -> rvo-action-group
- Tests in test/cov/* asserteren op de nieuwe classes (100% coverage behouden)
- CLAUDE.md button-conventie bijgewerkt

RVO component-library-css 4.20 stripte de standaard onder-marge van koppen
(utrecht-heading-1/2: 16px->0, heading-3: 12px->0) en zette de accordion-chevron
~5px te laag t.o.v. de titel. Beide degraderen de leesbaarheid zichtbaar t.o.v.
de productie-interface (4.8.0).

Compat-laag in base.css (raakt standalone + frontend):
- herstel heading margin-block-end (16/16/12px); rvo-heading--no-margins (door
  RVO verwijderd) opnieuw gedefinieerd zodat accordion-/projecttitels 0 blijven
- accordion-chevron-wrapper op 1.5rem + align center -> chevron weer uitgelijnd
  met de eerste tekstregel (gemeten 0px, was +5px; productie -1px)

Heading-default sluit nu elementen met een rvo-margin*-utility en
rvo-heading--no-margins uit, zodat alleen plain koppen de 4.8-marge terugkrijgen
en expliciete 0-utilities behouden blijven. Gemeten (live): card-titel
rvo-margin--none = 0px, plain sectiekop = 12px, accordion-titel = 0px.

Author: robbertbos

.claude/CLAUDE.md

@@ -82,7 +82,7 @@ De tsconfigs in `apps/*` en `packages/*` erven gedeelde instellingen via `extend
 - API-calls via `api.ts` naar `/api/v1/`, Bearer token via `useAuth().getToken()`
 - Gedeelde componenten komen uit `@overheid-assessment/core`
 - Dialogen: native `<dialog>` met `showModal()` (focus trap automatisch, `::backdrop` voor overlay). Geen handmatige backdrop-divs of `.open` property.
-- RVO buttons: `utrecht-button utrecht-button--primary-action utrecht-button--rvo-md` (NIET `--rvo-primary-action`). Varianten: `--primary-action`, `--secondary-action`, `--rvo-tertiary-action`. Sizes: `--rvo-xs`, `--rvo-md`
+- RVO buttons: `rvo-button rvo-button--primary rvo-button--size-md`. Varianten: `--primary`, `--secondary`, `--tertiary`, `--quaternary`, `--warning`. Sizes: `--size-xs`, `--size-sm`, `--size-md`. Icon-positie: `--icon-before` / `--icon-after`. Volle breedte: `--full-width`. (Sinds `@nl-rvo/component-library-css` 4.16 is Button van `utrecht-button*` naar `rvo-button*` gemigreerd; `utrecht-button` bestaat niet meer.)
 
 ## Database
 

apps/boekhouding-frontend/package.json

@@ -14,8 +14,8 @@
   },
   "dependencies": {
     "@nl-rvo/assets": "^1.0.0-alpha.360",
-    "@nl-rvo/component-library-css": "4.8.0",
-    "@nl-rvo/design-tokens": "1.9.0",
+    "@nl-rvo/component-library-css": "4.20.2",
+    "@nl-rvo/design-tokens": "2.4.1",
     "@overheid-assessment/core": "workspace:*",
     "@tabler/icons-vue": "^3.44.0",
     "keycloak-js": "^26.2.4",

apps/boekhouding-frontend/src/assets/app.css

@@ -108,7 +108,7 @@ dialog::backdrop {
   border-color: var(--rvo-color-rood, #d52b1e);
 }
 
-.confirm-dialog__actions .utrecht-button--secondary-action:hover {
+.confirm-dialog__actions .rvo-button--secondary:hover {
   background-color: var(--rvo-color-hemelblauw);
   border-color: var(--rvo-color-hemelblauw);
   color: var(--rvo-color-wit, #fff);
@@ -132,14 +132,14 @@ dialog::backdrop {
   color: var(--rvo-color-grijs-500, #666);
 }
 
-.rvo-alert .utrecht-button:hover {
+.rvo-alert .rvo-button:hover {
   text-decoration: none;
 }
 
 /* Fix anchor elements styled as buttons (RVO button classes don't fully reset anchor defaults) */
-a.utrecht-button {
+a.rvo-button {
   text-decoration: none;
-  color: var(--_utrecht-button-color);
+  color: var(--rvo-button-color);
 }
 
 a.card-link {

apps/boekhouding-frontend/src/components/AppHeader.vue

@@ -18,7 +18,7 @@ const { user, isAuthenticated, logout } = useAuth()
     <div class="app-header__left">
       <button
         v-if="backRoute || showBack"
-        class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs utrecht-button--icon-gap app-header__back"
+        class="rvo-button rvo-button--tertiary rvo-button--size-xs rvo-button--icon-before app-header__back"
         @click="backRoute ? router.push(backRoute) : router.back()"
       >
         <IconArrowLeft :size="16" /> {{ backLabel || 'Terug' }}
@@ -30,7 +30,7 @@ const { user, isAuthenticated, logout } = useAuth()
       <template v-if="isAuthenticated">
         <span v-if="user" class="app-header__user">{{ user.displayName }}</span>
         <button
-          class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs utrecht-button--icon-gap"
+          class="rvo-button rvo-button--tertiary rvo-button--size-xs rvo-button--icon-before"
           @click="logout"
         >
           <IconLogout :size="16" /> Uitloggen

apps/boekhouding-frontend/src/components/ConflictResolutionDialog.vue

@@ -87,7 +87,7 @@ function handleResolve() {
       <div class="confirm-dialog__actions">
         <button
           type="button"
-          class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
+          class="rvo-button rvo-button--primary rvo-button--size-md"
           @click="handleResolve"
         >Toepassen</button>
       </div>

apps/boekhouding-frontend/src/components/SessionExpiredDialog.vue

@@ -23,7 +23,7 @@ watch(sessionExpired, (expired) => {
       <div class="confirm-dialog__actions">
         <button
           type="button"
-          class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
+          class="rvo-button rvo-button--primary rvo-button--size-md"
           @click="relogin()"
         >Opnieuw inloggen</button>
       </div>

apps/boekhouding-frontend/src/views/AssessmentEditor.vue

@@ -376,7 +376,7 @@ const confirmDelete = async () => {
   <div v-else-if="error" class="rvo-max-width-layout rvo-max-width-layout--md" role="alert">
     <h2 class="utrecht-heading-2">Foutmelding</h2>
     <p>{{ error }}</p>
-    <button class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs utrecht-button--icon-gap" @click="assessment ? router.push(`/project/${assessment.projectId}`) : router.push('/projecten')">
+    <button class="rvo-button rvo-button--tertiary rvo-button--size-xs rvo-button--icon-before" @click="assessment ? router.push(`/project/${assessment.projectId}`) : router.push('/projecten')">
       <IconArrowLeft :size="16" /> Terug naar project
     </button>
   </div>
@@ -411,8 +411,8 @@ const confirmDelete = async () => {
               @keydown.enter="saveName"
               @keydown.escape="cancelName"
             />
-            <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-xs" @click="saveName">Opslaan</button>
-            <button class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs" @click="cancelName">Annuleer</button>
+            <button class="rvo-button rvo-button--primary rvo-button--size-xs" @click="saveName">Opslaan</button>
+            <button class="rvo-button rvo-button--tertiary rvo-button--size-xs" @click="cancelName">Annuleer</button>
           </div>
         </div>
         <div class="form-subheader__right">
@@ -496,14 +496,14 @@ const confirmDelete = async () => {
       </label>
       <div class="confirm-dialog__actions">
         <button
-          class="utrecht-button utrecht-button--rvo-md confirm-dialog__delete"
-          :class="deleteConfirmInput === 'VERWIJDEREN' ? 'utrecht-button--primary-action' : 'confirm-dialog__delete--disabled'"
+          class="rvo-button rvo-button--size-md confirm-dialog__delete"
+          :class="deleteConfirmInput === 'VERWIJDEREN' ? 'rvo-button--primary' : 'confirm-dialog__delete--disabled'"
           :disabled="deleteConfirmInput !== 'VERWIJDEREN'"
           @click="confirmDelete"
         >
           Assessment verwijderen
         </button>
-        <button class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md" @click="deleteModalOpen = false; deleteConfirmInput = ''">
+        <button class="rvo-button rvo-button--secondary rvo-button--size-md" @click="deleteModalOpen = false; deleteConfirmInput = ''">
           Annuleer
         </button>
       </div>

apps/boekhouding-frontend/src/views/LandingPage.vue

@@ -88,7 +88,7 @@ const assessments = [
               </p>
               <a
                 :href="standaloneUrl"
-                class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
+                class="rvo-button rvo-button--primary rvo-button--size-md"
               >
                 Start zonder account
               </a>
@@ -109,7 +109,7 @@ const assessments = [
                 mogelijkheid om opmerkingen te plaatsen.
               </p>
               <button
-                class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
+                class="rvo-button rvo-button--primary rvo-button--size-md"
                 @click="goToProjects"
               >
                 {{ isAuthenticated ? 'Naar projecten' : 'Inloggen' }}

apps/boekhouding-frontend/src/views/ProjectDetail.vue

@@ -349,14 +349,14 @@ const formatDate = (dateStr: string) =>
             @keydown.escape="cancelName"
           />
           <div class="editable-field-actions">
-            <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-xs" @click="saveName">Opslaan</button>
-            <button class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs" @click="cancelName">Annuleer</button>
+            <button class="rvo-button rvo-button--primary rvo-button--size-xs" @click="saveName">Opslaan</button>
+            <button class="rvo-button rvo-button--tertiary rvo-button--size-xs" @click="cancelName">Annuleer</button>
           </div>
         </div>
         <div class="project-actions">
           <button
             v-if="isOwner"
-            class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs utrecht-button--icon-gap"
+            class="rvo-button rvo-button--tertiary rvo-button--size-xs rvo-button--icon-before"
             @click="router.push(`/project/${projectId}/leden`)"
           >
             <IconUsers :size="16" /> Leden beheren
@@ -393,8 +393,8 @@ const formatDate = (dateStr: string) =>
           @keydown.escape="cancelDescription"
         />
         <div class="editable-field-actions">
-          <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-xs" @click="saveDescription">Opslaan</button>
-          <button class="utrecht-button utrecht-button--rvo-tertiary-action utrecht-button--rvo-xs" @click="cancelDescription">Annuleer</button>
+          <button class="rvo-button rvo-button--primary rvo-button--size-xs" @click="saveDescription">Opslaan</button>
+          <button class="rvo-button rvo-button--tertiary rvo-button--size-xs" @click="cancelDescription">Annuleer</button>
         </div>
       </div>
 
@@ -423,7 +423,7 @@ const formatDate = (dateStr: string) =>
             <h3 class="utrecht-heading-3 rvo-margin--none">Pre-scan</h3>
             <p>Toets of een DPIA, DTIA, IAMA of KIA nodig is.</p>
             <div class="card-button">
-              <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md" @click="openStartDialog('prescan')">
+              <button class="rvo-button rvo-button--primary rvo-button--size-md" @click="openStartDialog('prescan')">
                 Start pre-scan
               </button>
             </div>
@@ -434,7 +434,7 @@ const formatDate = (dateStr: string) =>
             <h3 class="utrecht-heading-3 rvo-margin--none">DPIA</h3>
             <p>Vul stap voor stap het rijksmodel DPIA in.</p>
             <div class="card-button">
-              <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md" @click="openStartDialog('dpia')">
+              <button class="rvo-button rvo-button--primary rvo-button--size-md" @click="openStartDialog('dpia')">
                 Start DPIA
               </button>
             </div>
@@ -445,7 +445,7 @@ const formatDate = (dateStr: string) =>
             <h3 class="utrecht-heading-3 rvo-margin--none">IAMA</h3>
             <p>Breng de impact op mensenrechten van een algoritme in kaart.</p>
             <div class="card-button">
-              <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md" @click="openStartDialog('iama')">
+              <button class="rvo-button rvo-button--primary rvo-button--size-md" @click="openStartDialog('iama')">
                 Start IAMA
               </button>
             </div>
@@ -567,14 +567,14 @@ const formatDate = (dateStr: string) =>
 
       <div class="start-dialog__actions">
         <button
-          class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md"
+          class="rvo-button rvo-button--primary rvo-button--size-md"
           :disabled="dialogSubmitting"
           @click="submitDialog"
         >
           {{ dialogSubmitting ? 'Bezig...' : (dialogAssessmentType === 'dpia' ? 'Start DPIA' : dialogAssessmentType === 'iama' ? 'Start IAMA' : 'Start pre-scan') }}
         </button>
         <button
-          class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md"
+          class="rvo-button rvo-button--secondary rvo-button--size-md"
           :disabled="dialogSubmitting"
           @click="closeDialog"
         >
@@ -598,14 +598,14 @@ const formatDate = (dateStr: string) =>
       </label>
       <div class="confirm-dialog__actions">
         <button
-          class="utrecht-button utrecht-button--rvo-md confirm-dialog__delete"
-          :class="deleteConfirmInput === 'VERWIJDEREN' ? 'utrecht-button--primary-action' : 'confirm-dialog__delete--disabled'"
+          class="rvo-button rvo-button--size-md confirm-dialog__delete"
+          :class="deleteConfirmInput === 'VERWIJDEREN' ? 'rvo-button--primary' : 'confirm-dialog__delete--disabled'"
           :disabled="deleteConfirmInput !== 'VERWIJDEREN'"
           @click="confirmDeleteProject"
         >
           Project verwijderen
         </button>
-        <button class="utrecht-button utrecht-button--secondary-action utrecht-button--rvo-md" @click="deleteProjectModalOpen = false; deleteConfirmInput = ''">
+        <button class="rvo-button rvo-button--secondary rvo-button--size-md" @click="deleteProjectModalOpen = false; deleteConfirmInput = ''">
           Annuleer
         </button>
       </div>

apps/boekhouding-frontend/src/views/ProjectList.vue

@@ -68,7 +68,7 @@ const handleCreate = async () => {
       </div>
 
       <div v-if="!showCreateForm">
-        <button class="utrecht-button utrecht-button--primary-action utrecht-button--rvo-md utrecht-button--icon-gap" @click="showCreateForm = true">
+        <button class="rvo-button rvo-button--primary rvo-button--size-md rvo-button--icon-before" @click="showCreateForm = true">
           <IconPlus :size="20" /> Nieuw project
         </button>
       </div>
@@ -85,7 +85,7 @@ const handleCreate = async () => {
             @input="autoGrowTextarea($event.target as HTMLTextAreaElement)"
           ></textarea>
         </div>
-        <div class="utrecht-button-group">
+        <div class="rvo-action-group">
           <UiButton variant="primary" type="submit" label="Project toevoegen" />
           <UiButton variant="secondary" label="Annuleren" @click="showCreateForm = false" />
         </div>