@amsterdam/design-system-css 0.3.0 → 0.5.0

package/src/components/aspect-ratio/README.md

@@ -1,18 +1,18 @@
 # Aspect Ratio
 
-Aspect Ratio (in het Nederlands: beeldverhouding) koppelt de hoogte van een element aan de breedte.
+Aspect Ratio updates the height of an element with its width.
 
-Om de vormgeving consistent te houden gebruiken we een vaste set verhoudingen (breedte:hoogte):
+These are the proportions we use:
 
-| _keyword_ | verhouding |
-| :-------- | ---------: |
-| `2x-wide` |       32:9 |
-| `x-wide`  |       16:9 |
-| `wide`    |        5:4 |
-| `square`  |        1:1 |
-| `tall`    |        4:5 |
-| `x-tall`  |       9:16 |
+| keyword   | ratio |
+| :-------- | ----: |
+| `2x-wide` |  32:9 |
+| `x-wide`  |  16:9 |
+| `wide`    |   5:4 |
+| `square`  |   1:1 |
+| `tall`    |   4:5 |
+| `x-tall`  |  9:16 |
 
-## Richtlijnen
+## Guidelines
 
-- Gebruik dit component om plaatjes, videos en andere elementen een vaste beeldverhouding te geven, zodat ze consistent schalen.
+- Use this component to constrain images, videos and other elements to one of the available aspect ratios.

package/src/components/badge/README.md

@@ -0,0 +1,10 @@
+# Badge
+
+A prominently coloured box containing 1 or 2 words.
+Guides the user in taking a specific action or describes its surrounding content.
+
+## Design
+
+The badge can contain a short text or a number.
+The default background colour is dark green.
+Suggestions on when to use the other colours will follow soon.

package/src/components/badge/badge.scss

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2024 Gemeente Amsterdam
+ */
+
+.amsterdam-badge {
+  display: inline-block;
+  font-family: var(--amsterdam-badge-font-family);
+  font-size: var(--amsterdam-badge-font-size);
+  font-weight: var(--amsterdam-badge-font-weight);
+  line-height: var(--amsterdam-badge-line-height);
+  padding-inline: var(--amsterdam-badge-padding-inline);
+}
+
+.amsterdam-badge--blue {
+  background-color: var(--amsterdam-badge-blue-background-color);
+  color: var(--amsterdam-badge-blue-color);
+}
+
+.amsterdam-badge--dark-blue {
+  background-color: var(--amsterdam-badge-dark-blue-background-color);
+  color: var(--amsterdam-badge-dark-blue-color);
+}
+
+.amsterdam-badge--dark-green {
+  background-color: var(--amsterdam-badge-dark-green-background-color);
+  color: var(--amsterdam-badge-dark-green-color);
+}
+
+.amsterdam-badge--green {
+  background-color: var(--amsterdam-badge-green-background-color);
+  color: var(--amsterdam-badge-green-color);
+}
+
+.amsterdam-badge--magenta {
+  background-color: var(--amsterdam-badge-magenta-background-color);
+  color: var(--amsterdam-badge-magenta-color);
+}
+
+.amsterdam-badge--orange {
+  background-color: var(--amsterdam-badge-orange-background-color);
+  color: var(--amsterdam-badge-orange-color);
+}
+
+.amsterdam-badge--purple {
+  background-color: var(--amsterdam-badge-purple-background-color);
+  color: var(--amsterdam-badge-purple-color);
+}
+
+.amsterdam-badge--yellow {
+  background-color: var(--amsterdam-badge-yellow-background-color);
+  color: var(--amsterdam-badge-yellow-color);
+}

package/src/components/blockquote/README.md

@@ -1,14 +1,14 @@
 # Blockquote
 
-De blockquote (in het Nederlands: citaat) wordt gebruikt om uitspraken te accentueren. Een citaat is anders vormgegeven dan de broodtekst, zodat deze opvalt.
+We use blockquotes to emphasize citations.
+A quote appears differently from the main text to make it stand out.
 
-Let op: dit component voegt automatisch aanhalingstekens aan de tekst toe, dat hoef je niet zelf te doen.
+## Guidelines
 
-## Richtlijnen
+- Quote someone’s literal written or oral text.
+- A quote has a width of half or a whole column of text.
+- The component adds the correct quotation marks.
 
-- Bij een citaat haal je letterlijk een schriftelijke of mondelinge tekst van iemand aan.
-- Een citaat heeft een breedte van een halve of hele tekstkolom.
+## Relevant WCAG requirements
 
-## Relevante WCAG eisen
-
-- [WCAG 3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html): wanneer het citaat in een andere taal is geschreven dan de pagina, dan moet het `lang` attribuut gebruikt worden om de taal duidelijk te maken.
+- [WCAG 3.1.2](https://www.w3.org/WAI/WCAG21/Understanding/language-of-parts.html): if the citation is in a language other than that of the surrounding content, indicate so through the `lang` attribute.

package/src/components/blockquote/blockquote.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,9 +16,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-spacious-font-size);
+  font-size: var(--amsterdam-blockquote-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-spacious-line-height);
+  line-height: var(--amsterdam-blockquote-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -27,11 +29,7 @@
     content: close-quote;
   }
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-blockquote-spacious-font-size);
-    line-height: var(--amsterdam-blockquote-spacious-line-height);
-  }
-
+  @include hyphenation;
   @include reset;
 }
 

package/src/components/breadcrumb/README.md

@@ -1,15 +1,18 @@
 # Breadcrumb
 
-De breadcrumb (in het Nederlands: kruimelpad) is een secundair navigatiepatroon dat een gebruiker helpt de structuur tussen niveaus in de website tot de huidige pagina te begrijpen. Gebruikers kunnen het gebruiken om door de structuur te navigeren.
+The breadcrumb is a secondary navigation pattern that helps a user understand the structure between levels in the website up to the current page.
+Users can use it to navigate.
 
-## Richtlijnen
+## Guidelines
 
-### Zo gebruiken
+### Use like this
 
-Gebruik het kruimelpad alleen als het functioneel iets toevoegt voor de gebruiker en als de structuur ‘statisch’ is.
+Only use the breadcrumb trail if it adds something functional for the user and the structure is ‘static’.
 
-### Dit vermijden
+### Avoid this
 
-Het kruimelpad wordt niet ingezet op een formulierpagina. Het leidt af van de taak van de gebruiker of kan per ongeluk als Progress Indicator gezien worden.
+Do not display the breadcrumb trail on a form page.
+It distracts the user from their task, or one can accidentally interpret it as a Progress Indicator.
 
-Het is een secundair navigatiepatroon. Het mag nooit de hoofdnavigatie vervangen.
+It is a secondary navigation pattern.
+It can’t replace the main navigation.

package/src/components/breadcrumb/breadcrumb.scss

@@ -12,14 +12,9 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
+  font-size: var(--amsterdam-breadcrumb-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
-  }
+  line-height: var(--amsterdam-breadcrumb-line-height);
 }
 
 .amsterdam-breadcrumb__list {

package/src/components/button/README.md

@@ -1,24 +1,27 @@
 # Button
 
-De button gebruik je zodat de gebruiker acties kan uit te voeren en de user interface kan bedienen.
+Allows the user to perform actions and operate the user interface.
 
-## Richtlijnen
+## Guidelines
 
-- Een label tekst die beschrijft wat de functie van de button is.
-- Een duidelijke constrasterende kleurstelling zodat deze goed te herkennen is en snel te lokaliseren valt.
-- Gebruik het juiste type button voor de daarbijhorende toepassing. Bijvoorbeeld een button binnen een formulier moet altijd het het type `submit` zijn.
-- Zorg dat een button ook met een keyboard te bedienen is.
+- A label text that describes the function of the button.
+- A clear contrasting colour scheme so that it is easy to recognize and quickly locate.
+- Use the correct type of button for the corresponding application.
+  For example, a button within a form must always be of the type `submit`.
+- Make sure one can operate a button through a keyboard.
 
-## Relevante WCAG eisen
+## Relevant WCAG requirements
 
-- [WCAG eis 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception): je kan de button activeren met `Enter` of `Space`, en het is mogelijk met `Tab` de button te focussen. `Space` gebruiken heeft dan niet het effect dat de pagina scrollt.
-- [WCAG eis 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): de label van de button moet duidelijk zijn
-- [WCAG eis 2.5.2](https://www.w3.org/TR/WCAG21/#pointer-cancellation):
-  - gebruik niet de `mousedown` event om de button te activeren, gebruik liever de `click` event
-  - `mousedown` mag alleen gebruikt worden als `mouseup` het effect weer ongedaan maakt, bijvoorbeeld een "_fast foward_" button om audio of video door te spoelen.
-- [WCAG eis 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): de button moet groot genoeg zijn om aan te klikken, en kleine buttons moeten niet te dicht op een andere button staan.
+- [WCAG requirement 2.1.3](https://www.w3.org/TR/WCAG21/#keyboard-no-exception):
+  You can activate the button with `Enter` or `Space`, and it is possible with ‘Tab’ the button to focus.
+  Using `Space` does not result in scrolling the page.
+- [WCAG requirement 2.4.6](https://www.w3.org/TR/WCAG21/#headings-and-labels): the label of the button must be clear
+- [WCAG requirement 2.5.2](https://www.w3.org/TR/WCAG21/#pointer-cancellation):
+  - do not use the `mousedown` event to activate the button, instead use the `click` event
+  - `mousedown` may only be used if `mouseup` undoes the effect, for example, a “fast forward” button to fast-forward audio or video.
+- [WCAG requirement 2.5.5](https://www.w3.org/TR/WCAG21/#target-size): The button must be large enough to click, and small buttons should not be too close to another button.
 
-## Referenties
+## References
 
 - [W3C - Focus Visible](https://www.w3.org/WAI/WCAG21/Understanding/focus-visible.html)
 - [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels)

package/src/components/button/button.scss

@@ -10,15 +10,10 @@
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-spacious-font-size);
-  line-height: var(--amsterdam-button-spacious-line-height);
+  font-size: var(--amsterdam-button-font-size);
+  line-height: var(--amsterdam-button-line-height);
 
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
-  }
 }
 
 .amsterdam-button--secondary {

package/src/components/card/README.md

@@ -1,25 +1,24 @@
 # Card
 
-Gebruik een card op een overzichtspagina om te verwijzen naar een detailpagina,
-zoals een nieuwsbericht, een vacature of een zoekresultaat.
-De card bevat meestal de titel, introductie en afbeelding van de content.
-De link is verplicht.
+Use a card on an overview page to link to an article page, such as a news article, a job vacancy, or a search result.
+The card typically includes the title, introduction, and an image of the content.
+The link is mandatory.
 
-## Richtlijnen
+## Guidelines
 
-- De titel van een card is een link in een heading.
-  Hier gelden dezelfde richtlijnen voor als voor reguliere [links](?path=/docs/react_navigation-link--docs) en [headings](?path=/docs/react_text-heading--docs).
-  De link is actief op het hele gebied van de card.
-- Een card heeft meer inhoud nodig dan alleen een titel.
-  Vul dit aan met tekstuele en/of visuele inhoud.
-- De tekst zet je in een reguliere paragraaf.
-  Alleen voor een tagline of datum gebruik je de kleinste tekstgrootte.
-- Als de inhoud geen detailpagina vertegenwoordigt is dit component niet de beste optie.
-  Om te verwijzen naar een thematische pagina gebruik je een [top task link](?path=/docs/react_navigation-top-task-link--docs).
-  Ook kun je een [reguliere link](?path=/docs/react_navigation-link--docs) inzetten.
+- The title of a card is a link within a heading.
+  The same guidelines as for regular [links](?path=/docs/react_navigation-link--docs) and [headings](?path=/docs/react_text-heading--docs) apply here.
+  The link is active across the entire area of the card.
+- A card needs more content than just a title.
+  Supplement this with textual and/or visual content.
+- Place the text in a regular paragraph.
+  Only use the smallest text size for a tagline or date.
+- This component may not be the best option if the content does not represent a detailed page.
+  For referencing a thematic page, use a [top task link](?path=/docs/react_navigation-top-task-link--docs).
+  You can also use a [regular link](?path=/docs/react_navigation-link--docs).
 
-## Schermlezers
+## Screen Readers
 
-Met een schermlezer kun je onder andere navigeren via headings en links in een document.
-De titel van een card is een link in een heading, zodat je van beide navigatiemanieren gebruik kunt maken.
-Een schermlezer leest eerst de titel op, daarna de rest van de inhoud.
+With a screen reader, you can navigate using headings and links in a document.
+The title of a card is a link within a heading, allowing you to utilize both navigation methods.
+A screen reader reads the title first, followed by the rest of the content.

package/src/components/checkbox/README.md

@@ -1,27 +1,28 @@
 # Checkbox
 
-De checkbox (in het Nederlands: selectievakje) wordt gebruikt om gebruikers een selectie te laten maken. Hij wordt ook gebruikt om gebruikers te laten weten dat ze akkoord gaan met specifieke voorwaarden.
+Allows users to make a selection or agree to terms.
 
-## Richtlijnen
+## Guidelines
 
-- Selectievakjes worden gebruikt voor 1 of meerdere keuzes die elkaar niet uitsluiten.
-- Elk selectievakje werkt onafhankelijk van andere selectievakjes in een lijst op hetzelfde hiërarchische niveau. Het aanvinken van een extra vakje heeft geen invloed op andere selecties in die lijst.
-- Je kunt een selectievakje wel gebruiken voor een bulkselectie of –deselectie van een hele lijst met selectievakjes, maar dan moet duidelijk zijn dat het bulkselectievakje op een ander hiërarchisch niveau zit dan de lijst die volledig wordt geselecteerd of gedeselecteerd.
-- Een groep selectievakjes kan worden gebruikt om gegevens op een pagina, in een menu of binnen een component te filteren.
-- Een selectievakje kan een antwoord op een gesloten vraag zijn, als er meerdere antwoorden mogelijk zijn.
-- Een lijst van selectievakjes is verticaal gestapeld om leesbaarheid en bruikbaarheid te bevorderen.
-- Een lijst van selectievakjes moet in een `fieldset` zitten, met een `legend` die beschrijft waar de lijst over gaat. Als de selectievakjes bijvoorbeeld worden gebruikt om antwoord op een vraag te krijgen, dan is de `legend` de vraag.
+- Checkboxes are used for one or multiple choices that do not exclude each other.
+- Each checkbox operates independently of other checkboxes in a list at the same hierarchical level.
+  Checking an additional checkbox does not affect other selections in that list.
+- You can use a checkbox for bulk selection or deselection of an entire list of checkboxes.
+  Still, it should be clear that the bulk selection checkbox is at a different hierarchical level than the list being fully selected or deselected.
+- Use a group of checkboxes to filter data on a page, in a menu, or within a component.
+- A checkbox can answer a closed question if multiple answers are possible.
+- A list of checkboxes is vertically stacked to enhance readability and usability.
+- A list of checkboxes should be in a `fieldset` with a `legend` describing what the list is about.
+  For example, if the checkboxes are used to get answers to a question, the `legend` is the question.
 
-## Checkbox labels
+## Checkbox Labels
 
-Een label:
+A label starts with a capital letter.
+It does not have punctuation at the end if it is a single sentence, word, or fragment.
+It is written in the first person when asking the user to agree to the terms and conditions.
 
-- ... begint met een hoofdletter
-- ... heeft geen interpunctie aan het einde als het een enkele zin, woord of fragment is.
-- ... is in de eerste persoon geschreven als het gaat om de vraag of de gebruiker akkoord gaat met de algemene voorwaarden
+## Relevant WCAG Requirements
 
-## Relevante WCAG eisen
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is.
 
-- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
-
-Checkbox is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.
+Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.

package/src/components/checkbox/checkbox.scss

@@ -19,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height));
+  height: calc(var(--amsterdam-checkbox-font-size) * var(--amsterdam-checkbox-line-height));
   width: 1.5rem;
 
   &::after {
@@ -31,10 +31,6 @@
     height: 1.5rem;
     width: 100%;
   }
-
-  .amsterdam-theme--compact & {
-    height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height));
-  }
 }
 
 @mixin reset {
@@ -46,10 +42,10 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-spacious-font-size);
+  font-size: var(--amsterdam-checkbox-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-spacious-line-height);
+  line-height: var(--amsterdam-checkbox-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -63,11 +59,6 @@
     }
   }
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-checkbox-compact-font-size);
-    line-height: var(--amsterdam-checkbox-compact-line-height);
-  }
-
   @include reset;
 }
 

package/src/components/dialog/README.md

@@ -1,19 +1,20 @@
 # Dialog
 
-A Dialog allows the user to focus on one task or a piece of information, by popping-up and blocking the page content until the modal task is completed, or until the user dismisses the action.
+A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action.
 
 ## Guidelines
 
-- Use Dialog sparingly, because it interrupts the user's workflow.
-- Use Dialog for short and non-frequent tasks. For common tasks consider using the main flow.
+- Use dialogs sparingly because they interrupt the user’s workflow.
+- Use a dialog for short and non-frequent tasks.
+  Consider using the main flow for regular tasks.
 
 ## Keyboard Support
 
-| key         | function                                                     |
-| :---------- | :----------------------------------------------------------- |
-| Tab         | Moves focus to next focusable element inside the dialog.     |
-| Shift + Tab | Moves focus to previous focusable element inside the dialog. |
-| Escape      | Closes the dialog.                                           |
+| key         | function                                                         |
+| :---------- | :--------------------------------------------------------------- |
+| Tab         | Moves focus to the next focusable element inside the dialog.     |
+| Shift + Tab | Moves focus to the previous focusable element inside the dialog. |
+| Escape      | Closes the dialog.                                               |
 
 ## References
 

package/src/components/dialog/dialog.scss

@@ -4,6 +4,7 @@
  */
 
 @import "../../common/breakpoint";
+@import "../../common/hyphenation";
 
 .amsterdam-dialog {
   background-color: var(--amsterdam-dialog-background-color);
@@ -52,15 +53,11 @@
   color: var(--amsterdam-dialog-title-color);
   flex: auto;
   font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-spacious-font-size);
+  font-size: var(--amsterdam-dialog-title-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-dialog-title-compact-font-size);
-    line-height: var(--amsterdam-dialog-title-compact-line-height);
-  }
+  line-height: var(--amsterdam-dialog-title-line-height);
 
+  @include hyphenation;
   @include reset;
 }
 
@@ -74,19 +71,3 @@
     justify-content: end;
   }
 }
-
-.amsterdam-dialog__close {
-  background-color: var(--amsterdam-dialog-close-background-color);
-  border: 0;
-  cursor: pointer;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
-.amsterdam-dialog__close svg {
-  fill: var(--amsterdam-dialog-close-fill);
-}
-
-.amsterdam-dialog__close:hover svg {
-  fill: var(--amsterdam-dialog-close-hover-fill);
-}

package/src/components/footer/README.md

@@ -1,11 +1,15 @@
 # Footer
 
-De footer (in het Nederlands: voettekst) sluit iedere webpagina af. De inhoud is service-informatie. Een gedeelte is voorgeschreven en een deel wordt ingevuld vanuit de doelstelling van de website.
+The footer is the closing section on every web page.
+Its content provides service information.
+A part is prescribed, and a part is filled based on the website’s objectives.
 
-## Richtlijnen
+## Guidelines
 
-- De voettekst is verplicht, er staat er 1 op elke pagina.
-- De eerste kolom richt zich op contactinformatie. De informatie is zo specifiek mogelijk gebonden aan de betreffende website of pagina (bijvoorbeeld een chatmogelijkheid indien aanwezig).
-- De tweede kolom bevat links naar relevante (online) sites of bronnen.
-- De derde kolom verwijst naar nieuwsbrieven, socials enz.
-- Het laatste deel van de voettekst is bedoeld voor koppelingen naar privacy, cookieverklaring, uitleg over de website e.d. Het is niet bedoeld voor koppelingen naar bijvoorbeeld contactinformatie.
+- The footer is mandatory, and there is one on every page.
+- The first column focuses on contact information.
+  The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
+- The second column contains links to relevant (online) sites or sources.
+- The third column refers to newsletters, social media, etc.
+- The last part of the footer is intended for links to privacy policies, cookie statements, explanations about the website, etc.
+  It is not intended for links to contact information, for example.

package/src/components/form-label/README.md

@@ -1,3 +1,7 @@
 # Form Label
 
-Een label element gebruik je om een formulierelement te beschrijven. Koppel een formulierelement (zoals een `input` of `textarea`) altijd aan een label.
+Describes a form control.
+
+## Guidelines
+
+Always associate a form element (such as an `input` or `textarea`) with a label.

package/src/components/form-label/form-label.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -10,14 +12,10 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-spacious-font-size);
+  font-size: var(--amsterdam-form-label-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-spacious-line-height);
+  line-height: var(--amsterdam-form-label-line-height);
 
+  @include hyphenation;
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-form-label-compact-font-size);
-    line-height: var(--amsterdam-form-label-compact-line-height);
-  }
 }

package/src/components/grid/README.md

@@ -1,21 +1,20 @@
 # Grid
 
-Verdeelt de breedte van het scherm in kolommen waarop de elementen van een pagina worden uitgelijnd.
+Divides the screen into columns to align the elements of a page.
 
-## Gebruik
+## Usage
 
-Elke pagina moet het grid gebruiken als basis voor de layout.
-Het staat dus direct binnen [Screen](?path=/docs/layout-screen--docs).
+Every page should use the grid as the foundation for its layout.
+It is placed directly within the [Screen](?path=/docs/layout-screen--docs).
 
-Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
-Vóór deze componenten sluit je een instantie van het grid af.
-Erbinnen en eventueel erna start je een nieuwe.
-Meerdere instanties van het grid component zijn dus mogelijk op een pagina.
-De kolommen van alle grids moeten wel precies op elkaar aansluiten.
+A [Footer](?path=/docs/react_containers-footer--docs) and a [Spotlight](?path=/docs/react_containers-spotlight--docs) are slightly wider than the grid.
+You close one instance of the grid before these components.
+Inside and optionally after them, you start a new one.
+Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely.
 
-Binnen het grid maak je cellen die de gewenste inhoud bevatten.
-Een cel beslaat vaak meerdere kolommen van het grid.
+Within the grid, you create cells containing the desired content.
+A cell often spans multiple columns of the grid.
 
-## Ontwerp
+## Design
 
-De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.
+The [design choices](?path=/docs/docs-designrichtlijnen-grid--docs) are described in the design guidelines.

package/src/components/grid/grid.scss

@@ -6,9 +6,6 @@
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
-
   display: grid;
   gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
@@ -23,9 +20,8 @@
   }
 }
 
-.amsterdam-grid--compact {
-  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
+.amsterdam-grid--gap-vertical--none {
+  row-gap: initial;
 }
 
 .amsterdam-grid--gap-vertical--small {

package/src/components/header/README.md

@@ -1,12 +1,12 @@
 # Header
 
-A Header offers a container to display a City of Amsterdam logo, subsite title and page menu.
+Arranges the City’s logo, the title of the website, and a page menu.
 
 ## Guidelines
 
 - Use the Header when the site is hosted on amsterdam.nl or one of its subdomains.
 - The page menu can contain a maximum of 5 items, including menu and search.
-- When you have a long subsite title, use no or as little page menu items as possible.
+- When you have a long subsite title, use no or as few page menu items as possible.
 
 ## References