@amsterdam/design-system-css 0.1.2 → 0.1.3

package/src/button/README.md

@@ -0,0 +1,24 @@
+# Button
+
+De button gebruik je zodat de gebruiker acties kan uit te voeren en de user interface kan bedienen.
+
+## Richtlijnen
+
+- 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.
+
+## Relevante WCAG eisen
+
+- [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.
+
+## Referenties
+
+- [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/button/button-css.md

@@ -0,0 +1,12 @@
+# CSS Button
+
+Het button component maakt gebruik van de CSS library van de gemeente Utrecht. Daarop is het Amsterdam Design toegepast. Concreet betekent dit dat de Utrecht class names worden gebruikt met de Amsterdamse css attribuut waarden.
+Een voorbeeld van een HTML button met de Amsterdamse styling is:
+
+```html
+<button class="utrecht-button">Amsterdam Button</button>
+```
+
+Deze button wordt getoond met de Amsterdamse button styling.
+
+Vedere documentatie van de Utrecht button is terug te vinden in hun [github](https://github.com/nl-design-system/utrecht/tree/main/components/button) repository.

package/src/button/button.scss

@@ -0,0 +1,14 @@
+@import "../../node_modules/@utrecht/components/button/css";
+@import "../../utils/breakpoint";
+
+.amsterdam-button {
+  font-size: var(--amsterdam-button-font-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-button-font-size-wide);
+  }
+}
+
+.amsterdam-button--secondary:hover {
+  box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+}

package/src/form-label/README.md

@@ -0,0 +1,3 @@
+# Form label
+
+Een label element gebruik je om een formulierelement te beschrijven. Koppel een formulierelement (zoals een `input` of `textarea`) altijd aan een label.

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

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+@import "../../utils/breakpoint";
+
+.amsterdam-form-label {
+  color: var(--amsterdam-form-label-color);
+  font-family: var(--amsterdam-form-label-font-family);
+  font-size: var(--amsterdam-form-label-font-size-narrow);
+  font-weight: var(--amsterdam-form-label-font-weight);
+  line-height: var(--amsterdam-form-label-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-form-label-font-size-wide);
+  }
+}

package/src/heading/README.md

@@ -0,0 +1,23 @@
+# Heading
+
+Een heading zegt iets over de onderstaande content. Met behulp van headings kan de gebruiker snel een overzicht krijgen van de structuur van de webpagina.
+
+## Richtlijnen
+
+- Een heading omschrijft de content eronder.
+- Gebruik een heading niet voor opmaak en styling, maar om de structuur van de pagina weer te geven.
+- Gebruik headings hierarchisch en sla geen heading niveaus over. Dus na een `h1` volgt een `h2` en dus niet een `h3`.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-content-structure-separation-programmatic):
+  Tekst die er uit ziet als een heading wordt ook door een computer herkend als een heading. Door gebruik te maken van het juiste heading niveau is voor alle gebruikers duidelijk hoe de pagina is gestructeerd.
+- [WCAG 2.4.1](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-skip): Headings kunnen gebruikt worden om naar een volgende sectie te navigeren met het toetsenbord
+- [WCAG 2.4.6](https://www.w3.org/WAI/WCAG21/quickref/#headings-and-labels): Beschrijf met headings het doel of het onderwerp van de onderliggende content
+- [WCAG 2.4.10](https://www.w3.org/WAI/WCAG21/quickref/#qr-navigation-mechanisms-headings): Gebruik headings om de content te structureren
+
+## Referenties
+
+- [W3C - Headings](https://www.w3.org/WAI/tutorials/page-structure/headings/)
+- [W3C - Headings & labels](https://www.w3.org/TR/WCAG21/#headings-and-labels)
+- [A11Y project - Heading structure](https://www.a11yproject.com/posts/how-to-accessible-heading-structure/)

package/src/heading/heading-css.md

@@ -0,0 +1,3 @@
+# CSS Heading
+
+Gebruik de juiste heading HTML-elementen als je van deze classes gebruik maakt. De beschikbare elementen zijn: `h1`, `h2`, `h3`, `h4`, `h5` en `h6`. Let bij het kiezen van een heading niveau op de structuur van de pagina. Heading niveaus worden gebruikt om informatie te groeperen. De titel van de pagina krijgt een `h1`. De eerste subtitel een `h2`. De daarna volgende titels van secties die horen bij die subtitel krijgen een `h3`, enzovoort. Als je een nieuwe sectie begint, gebruik je weer een `h2`. Het is toegestaan om stijl en semantiek los van elkaar te trekken. Een `h1` kan bijvoorbeeld de class `amsterdam-heading-2` krijgen.

package/src/heading/heading.scss

@@ -1,42 +1,57 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+@import "../../utils/breakpoint";
 
-.amsterdam-heading {
+@mixin reset {
+  box-sizing: border-box;
   break-after: avoid;
   break-inside: avoid;
-  color: black;
-  font-weight: 800;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+.amsterdam-heading {
+  color: var(--amsterdam-heading-color);
+  font-family: var(--amsterdam-heading-font-family);
+  font-weight: var(--amsterdam-heading-font-weight);
+
+  @include reset;
 }
 
 .amsterdam-heading-1 {
-  font-size: calculate-fluid-style(32, 80);
-  line-height: calculate-fluid-style(35, 80);
+  font-size: var(--amsterdam-heading-1-font-size-narrow);
+  line-height: var(--amsterdam-heading-1-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-1-font-size-wide);
+  }
 }
 
 .amsterdam-heading-2 {
-  font-size: calculate-fluid-style(28, 56);
-  line-height: calculate-fluid-style(34, 62);
+  font-size: var(--amsterdam-heading-2-font-size-narrow);
+  line-height: var(--amsterdam-heading-2-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-2-font-size-wide);
+  }
 }
 
 .amsterdam-heading-3 {
-  font-size: calculate-fluid-style(24, 40);
-  line-height: calculate-fluid-style(32, 48);
-}
+  font-size: var(--amsterdam-heading-3-font-size-narrow);
+  line-height: var(--amsterdam-heading-3-line-height);
 
-.amsterdam-heading-4 {
-  font-size: calculate-fluid-style(22, 32);
-  line-height: calculate-fluid-style(31, 38);
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-3-font-size-wide);
+  }
 }
 
-.amsterdam-heading-5 {
-  font-size: calculate-fluid-style(18, 24);
-  line-height: calculate-fluid-style(25, 31);
-}
+.amsterdam-heading-4 {
+  font-size: var(--amsterdam-heading-4-font-size-narrow);
+  line-height: var(--amsterdam-heading-4-line-height);
 
-.amsterdam-heading-6 {
-  font-size: calculate-fluid-style(16, 18);
-  line-height: calculate-fluid-style(22, 23);
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-heading-4-font-size-wide);
+  }
 }

package/src/icon/README.md

@@ -0,0 +1,21 @@
+# Icon
+
+Iconen zijn visuele symbolen die worden gebruikt om ideeën, thema’s of acties weer te geven. Ze communiceren in één oogopslag de boodschap en vestigen de aandacht op belangrijke (interactieve) informatie. Gebruik altijd een `Icon` component om een SVG icoon heen voor de juiste vormgeving en maatvoering.
+
+## Interactieve elementen
+
+Ter ondersteuning van tekstuele interactie-elementen, zoals knoppen en links, kunnen iconen gebruikt worden. Probeer altijd een icoon te voorzien van begeleidende tekst. Iconen zonder begeleidende tekst mogen alleen gebruikt worden als ze aan internationale standaarden voldoen, zoals menu (hamburger icoon), zoek (vergrootglas), volgende, vorige, play, pauze, enz.
+
+## Kleur
+
+Iconen zijn zwart of wit. Bij interactie zijn ze donkerblauw. Uitgeschakeld zijn ze grijs. En ze moeten voldoen aan dezelfde contrastverhouding voor toegankelijkheid als typografie bij een achtergrondkleur. Het icoon neemt standaard de kleur van de _container_ waar deze in zit over.
+
+## Uitlijning
+
+Iconen staan standaard links van de tekst en zijn verticaal in het midden van de eerste regel tekst uitgelijnd.
+
+## Grootte
+
+<!-- (TODO: linken naar typografie docs) -->
+
+De iconen gebruiken dezelfde tekstniveaus als alle typografische componenten om hun grootte te bepalen. Hierdoor zijn icoon en tekst makkelijk op elkaar af te stemmen.

package/src/icon/icon.scss

@@ -1,34 +1,103 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+@import "../../utils/breakpoint";
 
 .amsterdam-icon {
   align-items: center;
   display: inline-flex;
+}
 
-  /* TODO: this height should be provided by the text element its part of? */
-  height: calculate-fluid-style(24, 26);
+.amsterdam-icon svg {
+  fill: currentColor;
+}
 
-  /* TODO: 12px is not part of the design system, what should this be? */
-  margin-inline-end: 12px;
+.amsterdam-icon-size-3 {
+  height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
 
-  /* Offset icon by 3px, because Amsterdam Sans vertical alignment is off */
-  padding-block-end: 3px;
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
+  }
 }
 
-.amsterdam-icon svg {
-  fill: currentColor;
+.amsterdam-icon-size-3 svg {
+  height: var(--amsterdam-icon-size-3-icon-size-narrow);
+  width: var(--amsterdam-icon-size-3-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-3-icon-size-wide);
+    width: var(--amsterdam-icon-size-3-icon-size-wide);
+  }
+}
+.amsterdam-icon-size-4 {
+  height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-4 svg {
+  height: var(--amsterdam-icon-size-4-icon-size-narrow);
+  width: var(--amsterdam-icon-size-4-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-4-icon-size-wide);
+    width: var(--amsterdam-icon-size-4-icon-size-wide);
+  }
 }
 
-.amsterdam-icon-small svg {
-  height: 1rem;
-  width: 1rem;
+.amsterdam-icon-size-5 {
+  height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-5 svg {
+  height: var(--amsterdam-icon-size-5-icon-size-narrow);
+  width: var(--amsterdam-icon-size-5-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-5-icon-size-wide);
+    width: var(--amsterdam-icon-size-5-icon-size-wide);
+  }
+}
+
+.amsterdam-icon-size-6 {
+  height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-6 svg {
+  height: var(--amsterdam-icon-size-6-icon-size-narrow);
+  width: var(--amsterdam-icon-size-6-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-6-icon-size-wide);
+    width: var(--amsterdam-icon-size-6-icon-size-wide);
+  }
 }
 
-.amsterdam-icon-medium svg {
-  height: 1.5rem;
-  width: 1.5rem;
+.amsterdam-icon-size-7 {
+  height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
+  }
 }
 
-.amsterdam-icon-large svg {
-  height: 2rem;
-  width: 2rem;
+.amsterdam-icon-size-7 svg {
+  height: var(--amsterdam-icon-size-7-icon-size-narrow);
+  width: var(--amsterdam-icon-size-7-icon-size-narrow);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    height: var(--amsterdam-icon-size-7-icon-size-wide);
+    width: var(--amsterdam-icon-size-7-icon-size-wide);
+  }
 }

package/src/link/README.md

@@ -0,0 +1 @@
+# Link

package/src/link/link.scss

@@ -1,45 +1,101 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
 
 .amsterdam-link {
-  color: var(--amsterdam-color-primary-blue);
-  display: inline-flex;
-  font-size: calculate-fluid-style(18, 24);
-  font-weight: 800;
-  line-height: calculate-fluid-style(29, 38);
-  outline-offset: var(--amsterdam-focus-outline-offset);
-  text-decoration: none;
+  color: var(--amsterdam-link-color, blue);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-link-font-size-narrow);
+  line-height: var(--amsterdam-link-line-height);
+  outline-offset: var(--amsterdam-link-outline-offset);
+  text-decoration: var(--amsterdam-link-text-decoration, underline);
+  text-decoration-color: var(--amsterdam-link-text-decoration-color, currentColor);
+  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness, 1px);
+  text-underline-offset: var(--amsterdam-link-text-underline-offset);
+
+  &:hover,
+  &:active {
+    color: var(--amsterdam-link-hover-color);
+    text-decoration: var(--amsterdam-link-hover-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-hover-text-decoration-thickness, 1px);
+  }
+
+  &:focus {
+    color: var(--amsterdam-link-focus-color);
+    text-decoration: var(--amsterdam-link-focus-text-decoration);
+  }
+
+  &:visited {
+    color: var(--amsterdam-link-visited-color);
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-link-font-size-wide);
+  }
 }
 
-.amsterdam-link:focus,
-.amsterdam-link:hover {
-  outline-offset: var(--amsterdam-focus-outline-offset);
-  text-decoration: underline;
+.amsterdam-link--standalone-bold {
+  font-weight: var(--amsterdam-link-standalone-bold-font-weight);
 }
 
-.amsterdam-link-standalone {
-  box-shadow: inset 0 -2px var(--amsterdam-color-primary-blue);
-  font-weight: 400;
-  transition: box-shadow 100ms ease-in-out, color 100ms ease-in-out;
+.amsterdam-link--inline {
+  font-family: var(--amsterdam-link-inline-font-family);
+  font-size: var(--amsterdam-link-inline-font-size);
+  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+
+  &:visited {
+    color: var(--amsterdam-link-inline-visited-color);
+  }
 }
 
-.amsterdam-link-standalone:focus,
-.amsterdam-link-standalone:hover {
-  box-shadow: inset 0 -3px var(--amsterdam-color-primary-blue);
-  text-decoration: none;
+.amsterdam-link--in-list {
+  align-items: flex-start;
+  display: inline-flex;
+  font-size: var(--amsterdam-link-in-list-font-size-narrow);
+  gap: var(--amsterdam-link-in-list-gap);
+  line-height: var(--amsterdam-link-in-list-line-height);
+  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
+
+  // Override for icon size
+  span.amsterdam-icon svg {
+    height: 16px;
+    width: 16px;
+  }
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-link-in-list-font-size-wide);
+  }
 }
 
-.amsterdam-link-inline {
-  color: var(--amsterdam-color-primary-blue);
-  display: inline;
-  font-size: inherit;
-  font-weight: 400;
-  letter-spacing: inherit;
-  line-height: inherit;
+.amsterdam-link--on-background-dark {
+  color: var(--amsterdam-link-on-background-dark-color);
+  text-decoration: var(--amsterdam-link-on-background-dark-text-decoration);
+
+  &:hover,
+  &:active {
+    color: var(--amsterdam-link-on-background-dark-hover-color);
+    text-decoration: var(--amsterdam-link-on-background-dark-hover-text-decoration);
+  }
+
+  &:visited {
+    color: var(--amsterdam-link-on-background-dark-visited-color);
+  }
 }
 
-.amsterdam-link-inlist {
-  font-size: calculate-fluid-style(16, 18);
-  font-weight: 400;
-  line-height: calculate-fluid-style(24, 26);
-  padding-block: 12px;
+.amsterdam-link--on-background-light {
+  color: var(--amsterdam-link-on-background-light-color);
+  text-decoration: var(--amsterdam-link-on-background-light-text-decoration);
+
+  &:hover,
+  &:active {
+    color: var(--amsterdam-link-on-background-light-hover-color);
+    text-decoration: var(--amsterdam-link-on-background-light-hover-text-decoration);
+  }
+
+  &:visited {
+    color: var(--amsterdam-link-on-background-light-visited-color);
+  }
 }

package/src/list/list.scss

@@ -1,5 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+}
+
 .amsterdam-list {
   list-style: none;
   margin-block: 0;
   padding-inline: 0;
+
+  @include reset;
 }

package/src/paragraph/README.md

@@ -0,0 +1,24 @@
+# Paragraph
+
+De `Paragraph` component gebruik je voor een alinea met lopende tekst, instructies van formulieren en voor overige losstaande tekstfragmenten.
+
+## Richtlijnen
+
+- Groepeer zinnen die bij elkaar horen in een alinea. Begin een nieuwe alinea wanneer de tekst over een andere onderwerp gaat of een eigen doel heeft.
+- Overweeg of een alinea met meer dan 7 zinnen of 140 woorden duidelijker is als je tekst indeelt in twee alinea's. Teksten met niet al te lange alinea's zijn makkelijker te begrijpen als je pauze neemt, en door het groeperen is informatie sneller terug te vinden.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): Blokken die er uit zien als een alinea worden ook door een computer herkend als alinea
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Het contrast van zwarte tekst op een witte achtergrond is hoog genoeg
+- [WCAG 1.4.4](https://www.w3.org/TR/WCAG21/#resize-text): Tekst kan met zoomen en het aanpassen van de standaard tekstgrootte twee keer zo groot gemaakt worden
+- [WCAG 1.4.10](https://www.w3.org/TR/WCAG21/#reflow): Als de tekst breder is dan de viewport is scrollen niet nodig om alle tekst te kunnen zien
+- [WCAG 1.4.12](https://www.w3.org/TR/WCAG21/#text-spacing): De genoemde style properties kunnen worden aangepast zonder dat de tekst onleesbaar wordt
+- [WCAG 3.1.2](https://www.w3.org/TR/WCAG21/#language-of-parts): Het is aan te geven in welke taal de tekst is
+- [WCAG 1.4.6](https://www.w3.org/TR/WCAG21/#contrast-enhanced): Het contrast van zwarte tekst op een witte achtergrond is hoger dan 7:1
+- [WCAG 1.4.8](https://www.w3.org/TR/WCAG21/#visual-presentation): We voldoen niet aan al deze eisen
+
+## Referenties
+
+- [MDN: `<p>`: The Paragraph element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/p)
+- [Hoe lang mag een alinea zijn? En waar hangt dat van af? - Taaladvies.net](https://taaladvies.net/lengte-van-alineas/)

package/src/paragraph/paragraph-css.md

@@ -0,0 +1,3 @@
+# HTML
+
+Gebruik altijd het `<p>` HTML-element, die heeft automatisch de goede paragraph role in de accessibility tree (dat is nodig voor WCAG eis 1.3.1). Ook is zo de tekst nog steeds goed leesbaar als de CSS niet geladen kan worden.

package/src/paragraph/paragraph.scss

@@ -1,17 +1,43 @@
-@import "../../utils/calculate-fluid-style";
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+@import "../../utils/breakpoint";
 
-.amsterdam-paragraph {
-  font-size: calculate-fluid-style(18, 24);
-  line-height: calculate-fluid-style(29, 38);
+@mixin reset {
+  box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
 
-.amsterdam-paragraph-intro {
-  font-size: calculate-fluid-style(22, 30);
-  line-height: calculate-fluid-style(35, 45);
+.amsterdam-paragraph {
+  color: var(--amsterdam-paragraph-color);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-paragraph-font-size-narrow);
+  font-weight: var(--amsterdam-paragraph-font-weight);
+  line-height: var(--amsterdam-paragraph-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-paragraph-font-size-wide);
+  }
+
+  @include reset;
 }
 
 .amsterdam-paragraph-small {
-  font-size: calculate-fluid-style(16, 18);
-  line-height: calculate-fluid-style(24, 29);
+  font-size: var(--amsterdam-paragraph-small-font-size-narrow);
+  line-height: var(--amsterdam-paragraph-small-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-paragraph-small-font-size-wide);
+  }
+}
+
+.amsterdam-paragraph-large {
+  font-size: var(--amsterdam-paragraph-large-font-size-narrow);
+  line-height: var(--amsterdam-paragraph-large-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-paragraph-large-font-size-wide);
+  }
 }

package/utils/breakpoint.scss

@@ -1,5 +1,10 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
 /*
-  The breakpoint is 820px / 16 = 51.25rems
+  The breakpoint is 854px / 16 = 53.375rems
   https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
 */
-$amsterdam-breakpoint: 51.25rem;
+$amsterdam-breakpoint: 53.375rem;

package/utils/calculate-fluid-style.scss

@@ -1,6 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
 @use "sass:math";
 
-@function calculate-fluid-style($minSizePx, $maxSizePx, $minScreenWidthPx: 320, $maxScreenWidthPx: 1920) {
+@function calculate-fluid-style($minSizePx, $maxSizePx, $minScreenWidthPx: 320, $maxScreenWidthPx: 1440) {
   $defaultBaseSize: 16;
   $minSize: math.div($minSizePx, $defaultBaseSize) * 1rem;
   $maxSize: math.div($maxSizePx, $defaultBaseSize) * 1rem;

package/dist/document/document.css

@@ -1,22 +0,0 @@
-@import "normalize.css";
-body {
-  font-family: "Amsterdam Sans", "Arial", sans-serif;
-  font-size: clamp(
-    1.125rem,
-    calc(
-      1.125rem + 0.00375 * (100vw - 20rem)
-    ),
-    1.5rem
-  );
-  font-weight: 400;
-  line-height: 160%;
-}
-
-/* Use border-box sizing by default for all elements */
-*,
-*::before,
-*::after {
-  box-sizing: border-box;
-}
-
-/*# sourceMappingURL=document.css.map */

package/dist/document/document.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/document/document.scss"],"names":[],"mappings":"AAAQ;AAGR;EACE;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;;;AAGF;AACA;AAAA;AAAA;EAGE","file":"document.css"}