PR#38 add font-family and changed colors

[lidwienl]

Summary

changing the 'Voorbeeld' theme to OIP theme.

[jiromaykin]

ToDo:

• geen pixelwaarden gebruiken maar alleen Rem waarden met Token Studio https://docs.tokens.studio/manage-tokens/token-types/dimension misschien kun je REMs niet meteen invullen maar moet je er een procent teken achteraan invullen zodat Style Dictionary er CSS van kan maken
• uitzoeken of 'Lato' vervangen kan worden door 'Body,' en 'Ubuntu' door 'Heading', waarschijnlijk kan dat niet tenzij je met Token Studio er variabelen van kunt maken, en dan bijvoorbeeld 'Body' kunt laten doorverwijzen naar de waarde 'Lato' zodat het er in Figma toch nog uit ziet als of er een lettertype gekozen is, misschien d.m.v. de "alias": https://docs.tokens.studio/manage-tokens/token-types/typography/font-family
• uitzoeken waarom de "components/button/utrecht" tokens er nog in staan nu de NL-Button candidate is
• marges baseren op wat we nu hebben in T-shirt sizes https://github.com/maykinmedia/open-inwoner-design-tokens/blob/main/src/brand/openinwoner/layout.tokens.json
• er staat nu nog een "box-shadow": {... "color": "{basis.color.default.color-default}" in maar dat zou betekenen dat die "{oip.color.accent.default}" is en dat is een soort paars, dus die zou transparant moeten worden o.i.d.
• kijk strakker naar de line-heights etc. in open-inwoner zelf: https://github.com/maykinmedia/open-inwoner/blob/develop/src/open_inwoner/scss/views/App.scss als een tekst font-size: 16px heeft en line-height: 150%, dan is de regelafstand 16px × 1.5 = 24px. Misschien kan Style-Dictionary niet werken met 'unitless' waarden.
• beslis welke grijstinten we weg gooien of juist meer willen gebruiken etc. https://github.com/maykinmedia/open-inwoner/blob/a402c98314bc63f64da3c328f610d2926ad55eab/src/open_inwoner/scss/views/App.scss#L32
• de max inline size van OIP is 1024 dus niet degene die NLDS gebruikt:

"max-inline-size": {
          "$type": "dimension",
          "$value": "1440px"
        },

[jiromaykin]

ToDo: zoek uit of hier een waarde in kan worden ingevuld die in FIgma geen bestaand font is. Open Inwoner gebruikt hier het woord "Body" in plaats van Lato - omdat we geen font vast mogen zetten, zodat gemeente hun eigen fonts kunnen uploaden.