Stijl en layout

Een goede module voelt aan als een deel van Tabbr. Dat bereik je niet met eigen CSS, maar door de bouwstenen van Tabbr te gebruiken: Angular Material, de Tailwind-klassen van Tabbr en de themakleuren. Dan klopt je module meteen in licht en donker, en in de kleuren van elke club. De module Toestemmingen heeft helemaal geen eigen CSS.

De regels

Angular Material voor knoppen, velden, dialogen, tabellen. Tabbr themet ze. Een dialoog bouw je met <h2 mat-dialog-title>, <mat-dialog-content> en <mat-dialog-actions>.
De Tailwind-klassen van Tabbr. Alleen de klassen in tabbr-ui/tailwind.module-classes.js zijn gegarandeerd aanwezig; de lijst staat in de README van @tabbr/module-sdk (Styling).
Alleen themakleuren, nooit vaste kleuren: text-secondary, bg-card, text-primary, tinten als bg-green-500/20.
Eigen component-CSS alleen als het niet anders kan — en nooit ::ng-deep.
Markdown of HTML via [innerHTML]: geef het element class="prose prose-sm max-w-none".

Een pagina die zichzelf scrollt

Het venster van Tabbr scrollt nooit (body { overflow: hidden }). Een pagina vult de ruimte onder de header en scrollt een deel van zichzelf:

<div class="absolute inset-0 flex flex-col">
  <!-- vast bovenaan: titel, filters -->
  <div class="flex-none p-6">
    <h1 class="text-3xl font-bold">Groepen</h1>
  </div>

  <!-- dit deel scrollt -->
  <div class="flex-auto min-h-0 overflow-auto px-6 pb-6">
    <table class="w-full">
      <thead class="sticky top-0 z-10 bg-card">…</thead>
      <tbody>…</tbody>
    </table>
  </div>
</div>

Een lange lijst laadt pagina per pagina terwijl je scrolt — zie Lange lijsten.

Kaarten

<div class="rounded-2xl bg-card shadow p-4">
  <div class="text-lg font-semibold">Mijn bevoegdheden</div>
  <div class="text-secondary">3 geldig, 1 vervalt binnenkort</div>
</div>

Tekstgroottes

Tabbr gebruikt de schaal van het Fuse-thema, die kleiner is dan standaard-Tailwind:

Klasse	Grootte
`text-sm`	12px
`text-md`	13px
`text-base`	14px
`text-lg`	16px
`text-2xl`	20px
`text-3xl`	24px

Valkuilen

Id’s van formuliervelden. Geef elke matInput, mat-checkbox en mat-radio-button een id met een eigen voorvoegsel (grp-, cns-, qlf-), en elke mat-select een aria-label. Anders botsen de id’s die Material zelf maakt met die van Tabbr.
Donkere modus. Tabbr kleurt h1–h6 en p wit in donkere modus. Zet secundaire tekst dus op een div of span met text-secondary, niet op een p.
Schermacties horen in de header van de app, niet onderaan je pagina — zie Schermacties in de header.