=======================
NLDS - NL Design System
=======================
De interface van de applicatie is opgebouwd met componenten uit het **NL Design System (NLDS)**. Dit is een verzameling ontwerp- en ontwikkelrichtlijnen voor digitale overheidsdiensten in Nederland. Door gebruik te maken van NLDS-componenten blijft de gebruikerservaring consistent en toegankelijk, in lijn met de standaarden van de overheid.
🔗 `Introductie NLDS `_
🔗 `NLDS voor developers `_
Aanpasbaarheid voor gemeentes
=============================
Dankzij NLDS kunnen verschillende installaties van de applicatie eenvoudig worden aangepast aan de huisstijl van diverse gemeentes. Dit wordt mogelijk gemaakt door het gebruik van design tokens, die de stijlkenmerken zoals kleuren, typografie en componenten bepalen.
Implementatie op basis van Utrecht Design System
------------------------------------------------
Op dit moment is de implementatie gebaseerd op alleen het Utrecht Design System, een specifieke variant van NLDS. Voor een correcte weergave en de beste resultaten moeten ten minste de Brand en Common tokens correct ingevuld zijn.
Gebruikte CSS-componenten
-------------------------
============================================= ================================================================================================================================
**Component** **Storybook**
--------------------------------------------- --------------------------------------------------------------------------------------------------------------------------------
**Document** (`utrecht-document`) `🔗 Design Tokens `_
**Surface** (`utrecht-surface`) `🔗 Design Tokens `_
**Page** (`utrecht-page`) `🔗 Design Tokens `_
**Page header** (`utrecht-page-header`) `🔗 Design Tokens `_
**Page content** (`utrecht-page-content`) `🔗 Design Tokens `_
**Page footer** (`utrecht-page-footer`) `🔗 Design Tokens `_
**Navigation bar** (`utrecht-nav-bar`) `🔗 Design Tokens `_
**Link** (`utrecht-link`) `🔗 Design Tokens `_
**Skip link** (`utrecht-skip-link`) `🔗 Design Tokens `_
**Article** (`utrecht-article`) `🔗 Design Tokens `_
**Heading** (`utrecht-heading`) `🔗 Design Tokens `_
**Paragraph** (`utrecht-paragraph`) `🔗 Design Tokens `_
**Unordered list** (`utrecht-unordered-list`) `🔗 Design Tokens `_
**Button** (`utrecht-button`) `🔗 Design Tokens `_
**Form field** (`utrecht-form-field`) `🔗 Design Tokens `_
**Form label** (`utrecht-form-label`) `🔗 Design Tokens `_
**Textbox** (`utrecht-textbox`) `🔗 Design Tokens `_
**Table** (`utrecht-table`) `🔗 Design Tokens `_
**Logo** (`utrecht-logo`) `🔗 Design Tokens `_
============================================= ================================================================================================================================
ITA Theme
---------
Naast de bovenstaande componenten bestaat de interface van de applicatie ook uit verschillende custom componenten en elementen. Deze (ita) componenten en elementen kunnen via een aantal voorgedefinieerde css-variabelen worden aangepast voor een uniforme uitstraling binnen de huisstijl van de gemeente.
Ter referentie `ita-theme `_.
Test Theme
----------
In de `public` folder van de ITA Web.Client applicatie staan `test-theme.css` en `test-logo.svg`. Om de installatie van de applicatie te testen kunnen verwijzingen naar deze bestanden worden gebruikt bij de configuratie van de omgevingsvariabelen. **Let op:** deze verwijzingen moeten absolute URL's zijn, zie :ref:`config_omgevingsvariabelen`.
.. code-block:: none
"THEME_NAAM": "test-theme",
"LOGO_URL": "https:///test-logo.svg",
"DESIGN_TOKENS_URL": "https:///test-theme.css"
De test-theme bestanden kunnen daarnaast gebruikt worden om in een ontwikkelomgeving wat custom waardes te testen.
.. code-block:: none
.test-theme {
// utrecht
--utrecht-link-color: #333; // custom waarde
// ita
--ita-dashboard-tables-column-gap: 2rem; // custom waarde
}