CSS-tokens van Addofy

Deze custom properties zijn publiek en stabiel. Ze staan op body.adba en volgen het thema (licht, donker, automatisch) en de dichtheid. Gebruik ze voor je eigen componenten en je interface volgt de keuzes van de gebruiker.

Kleuren

Token	Betekenis
--adba-bg	Paginaachtergrond.
--adba-surface, --adba-surface-muted	Achtergrond van een kaart, subtiele kaartachtergrond.
--adba-border	Randen en scheidingslijnen.
--adba-text, --adba-text-muted	Lopende tekst, secundaire tekst.
--adba-accent	Links, focus, actieve items.
--adba-accent-text	Het accent als tekst (4,5:1).
--adba-accent-2, --adba-accent-2-text, --adba-on-accent-2	Tweede accent als vulling, als tekst en tekst erop (sinds 2.12.0). Gelijk aan het accent in licht.
--adba-hover, --adba-on-hover	Hoverkleur van links, icoonknoppen en tabs, en tekst op een hovervulling (sinds 2.12.0). Niet gezet in de ingebouwde paletten: gebruik var(--adba-hover, your-own-hover).
--adba-primary, --adba-primary-text	Achtergrond en tekst van de primaire knop.
--adba-success, --adba-warning, --adba-danger, --adba-info	Statuskleuren.

Vorm, ruimte en lettertype

Token	Betekenis
--adba-radius-sm, --adba-radius, --adba-radius-lg	Hoekafronding (6, 8, 12 px).
--adba-space-1 tot --adba-space-6	Ruimteschaal (4, 8, 12, 16, 24, 32 px).
--adba-font, --adba-font-size	Lettertypestack en basisgrootte.

Dichtheidstokens

De dichtheidstokens veranderen met de dichtheid van de gebruiker: ruim, compact of dicht. Automatisch kiest compact op lijsten. Op touchschermen (782px en smaller) blijven bedieningselementen en icoonknoppen 44px, ongeacht de dichtheid.

Token	Betekenis
--adba-row-height	Rijhoogte van lijsten.
--adba-control-h, --adba-control-h-sm	Hoogte van invoervelden en knoppen.
--adba-line, --adba-title-page-fs	Regelhoogte en grootte van de paginatitel.
--adba-pagebar-h, --adba-tab-h, --adba-palette-row	Hoogte van de paginabalk, tabs en zoekresultaatrijen.
--adba-menu-item-h, --adba-menu-icon	Hoogte van zijbalkitems en grootte van het icoon.
--adba-cell-pad-y, --adba-cell-pad-x, --adba-thumb	Celpadding van tabellen en grootte van de lijstminiatuur.
--adba-badge-fs, --adba-badge-pad, --adba-icon-btn	Tekstgrootte en padding van badges, grootte van icoonknoppen.
--adba-box-head-h, --adba-box-pad, --adba-gap-section	Hoogte van de boxkop, padding van de box en ruimte tussen boxen.
--adba-field-row-pad, --adba-th-w	Rijpadding van de instellingentabel en breedte van de labelkolom.
--adba-card-min, --adba-card-pad	Minimale breedte en padding van instellingenkaarten.
--adba-feed-gap, --adba-dialog-pad	Ruimte in notities en meldingen, padding van dialogen en panelen.

Wat niet publiek is

Al het andere (--adba-gray-*, schaduwen, kleuren van de topbalk en zijbalk, componenttokens) is intern en kan veranderen. Sommige kleurtokens kun je wel overschrijven in een palet.

Voorbeeld

body.adba .myplugin-card {
	padding: var(--adba-card-pad);
	border: 1px solid var(--adba-border);
	border-radius: var(--adba-radius);
	background: var(--adba-surface);
	color: var(--adba-text);
}

Gerelateerd

• Donkere modus en kleurenpaletten