Consistente oplossing voor keep vormtaal (zie comment design review)

[Rozerinay]

Omschrijving

De nieuwe Rijkshuisstijl heeft een vormtaal genaamd 'keep'. Deze kan op verschillende componenten worden toegepast, onder andere op:

• Image
• Hero
• Blockquote

Kunnen we iets verzinnen dat je deze vormtaal gemakkelijk en consistent op je componenten kunt zetten?

Om je als organisatie te kunnen differentiëren van andere overheidsorganisaties mag je hier zelf een borderradius voor kiezen op basis van halve lint-sizes (24px). Dus 24px, 48px, 72px etc. Je mag deze ook random toepassen. Dus op ene image 24px en op een ander 72px, dit moet dus mogelijk zijn.

Andere regels:

• Verder is er ook de regel dat de border radius niet tegenover elkaar mogen staan als je meerdere keeps combineert zoals in de hero. Dit dan ook niet mogelijk maken in het component.
• Er mogen maximaal 3 vorm elementen genest worden.
• Er zijn ook andere regels zoals: Het vormelement krijgt een breedte die gebaseerd is op de breedte of hoogte van het basiskader. Denk hierbij aan een kwart, half, driekwart of hele breedte, maar ook aan 1/3 of 2/3 verhoudingen.

Dit graag ook laten werken als je wisselt van thema: oud naar nieuwe rijkshuisstijl.

Degene die hieraan werkt kan ik wel wat meer info sturen, qua plaatjes enzo.

[Rozerinay]

@AlineNap note voor ons: ook de Hero reviewen zodra dit ticket in 'Design review' staat.

[AlineNap]

Design review 15 November

• Is het een idee om de keep vormtaal al op/om de componenten te plaatsen a la block-quote, Hero, image, etc? Ipv dat de developer het in keep zet?
• Alleen top-right lijkt het te doen in de playground, als ik andere selecteer zijn alle corners 0. Als component vormtaal is geselecteerd.
• Ik zou graag design tokens zien voor de border-radius sizes, zodat een themamaker deze kan aanpassen naar wens. A la rhc.keep.m.border-radius, rhc.keep.s.border-radius, rhc.keep.l.border-radius.
• De design tokens uit het screenshot zijn niet nodig, voor de variant top-left zullen de tokens rhc.keep.top-left.borderRadiusTopRight, rhc.keep.top-left.borderRadiusBottomRigh, rhc.keep.top-left.borderRadiusBottomLeft altijd 0 zijn, deze moge hard-coded. Alleen rhc.keep.top-left.borderRadiusTopLeft past zich aan naar de size keuzes. Daarvoor gebruik je de tokens van het vorige punt.
• Als we keep al om component heenzetten moeten we het wellicht mogelijk maken om ook border: none te hebben naast right-top, left-top etc. Dus die dan graag toevoegen.

[Rozerinay]

@MeesD94 wat zijn de stand van zaken?