@amsterdam/design-system-css 0.1.9 → 0.3.0

package/src/components/header/header.scss

@@ -0,0 +1,85 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../common/breakpoint";
+
+.amsterdam-header {
+  align-items: center;
+  display: flex;
+  flex-wrap: wrap;
+  padding-block: 1rem;
+  row-gap: 1.5rem;
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    column-gap: var(--amsterdam-header-column-gap);
+    flex-wrap: nowrap;
+  }
+}
+
+.amsterdam-header__logo {
+  flex: none;
+  outline-offset: var(--amsterdam-link-outline-offset);
+}
+
+.amsterdam-header__links {
+  display: none;
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    display: block;
+    flex: 10 0 auto;
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    order: 3;
+  }
+}
+
+.amsterdam-header__menu {
+  flex: 1;
+  padding-inline-start: var(--amsterdam-page-menu-column-gap);
+  text-align: end;
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    order: 4;
+    padding-inline-start: 0;
+  }
+}
+
+.amsterdam-header__title {
+  flex: 1 1 100%;
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    min-width: 0;
+    order: 2;
+
+    .amsterdam-header__title-heading {
+      display: block;
+      line-height: 1;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+      width: 100%;
+    }
+  }
+}
+
+// Temporary, will move to megamenu (and/or iconButton)
+.amsterdam-header__menu-button {
+  background-color: transparent;
+  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
+  background-position: center right;
+  background-repeat: no-repeat;
+  background-size: 19px 19px;
+  border: 0;
+  color: var(--amsterdam-page-menu-item-color);
+  font-family: var(--amsterdam-page-menu-item-font-family);
+  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
+  font-weight: var(--amsterdam-page-menu-item-font-weight);
+  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  margin-block: 0;
+  padding-inline: 0 30px;
+  text-align: center;
+  touch-action: manipulation;
+}

package/src/components/heading/heading.scss

@@ -0,0 +1,84 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-heading {
+  break-after: avoid;
+  break-inside: avoid;
+  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: var(--amsterdam-heading-spacious-level-1-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-1-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-1-font-size);
+    line-height: var(--amsterdam-heading-compact-level-1-line-height);
+  }
+}
+
+.amsterdam-heading--2 {
+  font-size: var(--amsterdam-heading-spacious-level-2-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-2-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-2-font-size);
+    line-height: var(--amsterdam-heading-compact-level-2-line-height);
+  }
+}
+
+.amsterdam-heading--3 {
+  font-size: var(--amsterdam-heading-spacious-level-3-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-3-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-3-font-size);
+    line-height: var(--amsterdam-heading-compact-level-3-line-height);
+  }
+}
+
+.amsterdam-heading--4 {
+  font-size: var(--amsterdam-heading-spacious-level-4-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-4-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-4-font-size);
+    line-height: var(--amsterdam-heading-compact-level-4-line-height);
+  }
+}
+
+.amsterdam-heading--5 {
+  font-size: var(--amsterdam-heading-spacious-level-5-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-5-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-5-font-size);
+    line-height: var(--amsterdam-heading-compact-level-5-line-height);
+  }
+}
+
+.amsterdam-heading--6 {
+  font-size: var(--amsterdam-heading-spacious-level-6-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-6-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-6-font-size);
+    line-height: var(--amsterdam-heading-compact-level-6-line-height);
+  }
+}
+
+.amsterdam-heading--inverse-color {
+  color: var(--amsterdam-heading-inverse-color);
+}

package/src/components/icon/icon.scss

@@ -0,0 +1,87 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-icon {
+  align-items: center;
+  display: inline-flex;
+}
+
+.amsterdam-icon svg {
+  fill: currentColor;
+}
+
+.amsterdam-icon--size-3 {
+  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
+}
+
+.amsterdam-icon--size-3 svg {
+  height: var(--amsterdam-icon-spacious-size-3-font-size);
+  width: var(--amsterdam-icon-spacious-size-3-font-size);
+}
+
+.amsterdam-icon--size-4 {
+  height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height));
+}
+
+.amsterdam-icon--size-4 svg {
+  height: var(--amsterdam-icon-spacious-size-4-font-size);
+  width: var(--amsterdam-icon-spacious-size-4-font-size);
+}
+
+.amsterdam-icon--size-5 {
+  height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height));
+}
+
+.amsterdam-icon--size-5 svg {
+  height: var(--amsterdam-icon-spacious-size-5-font-size);
+  width: var(--amsterdam-icon-spacious-size-5-font-size);
+}
+
+.amsterdam-icon--size-6 {
+  height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
+}
+
+.amsterdam-icon--size-6 svg {
+  height: var(--amsterdam-icon-spacious-size-6-font-size);
+  width: var(--amsterdam-icon-spacious-size-6-font-size);
+}
+
+.amsterdam-theme--compact {
+  .amsterdam-icon--size-3 {
+    height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height));
+  }
+
+  .amsterdam-icon--size-3 svg {
+    height: var(--amsterdam-icon-compact-size-3-font-size);
+    width: var(--amsterdam-icon-compact-size-3-font-size);
+  }
+
+  .amsterdam-icon--size-4 {
+    height: calc(var(--amsterdam-icon-compact-size-4-font-size) * var(--amsterdam-icon-compact-size-4-line-height));
+  }
+
+  .amsterdam-icon--size-4 svg {
+    height: var(--amsterdam-icon-compact-size-4-font-size);
+    width: var(--amsterdam-icon-compact-size-4-font-size);
+  }
+
+  .amsterdam-icon--size-5 {
+    height: calc(var(--amsterdam-icon-compact-size-5-font-size) * var(--amsterdam-icon-compact-size-5-line-height));
+  }
+
+  .amsterdam-icon--size-5 svg {
+    height: var(--amsterdam-icon-compact-size-5-font-size);
+    width: var(--amsterdam-icon-compact-size-5-font-size);
+  }
+
+  .amsterdam-icon--size-6 {
+    height: calc(var(--amsterdam-icon-compact-size-6-font-size) * var(--amsterdam-icon-compact-size-6-line-height));
+  }
+
+  .amsterdam-icon--size-6 svg {
+    height: var(--amsterdam-icon-compact-size-6-font-size);
+    width: var(--amsterdam-icon-compact-size-6-font-size);
+  }
+}

package/src/{image → components/image}/README.md

@@ -7,8 +7,13 @@ Toont een afbeelding.
 - Vergeet niet om een beschrijving van de afbeelding op te nemen in het `alt`-attribuut.
   Dit zorgt ervoor dat gebruikers van schermlezers deze informatie ook tot zich kunnen nemen.
   Daarnaast kan het helpen bij zoekmachineoptimalisatie.
-- Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`.
+  Alleen voor decoratieve afbeeldingen is zo’n beschrijving niet nodig. Gebruik in dit geval `alt=""`.
   Denk aan afbeeldingen die weinig toevoegen aan de nabije tekst of afbeeldingen die louter bijdragen aan het ontwerp of de sfeer van de pagina (bron: [W3C Web Accessibility Initiative](https://www.w3.org/WAI/tutorials/images/decorative/)).
+- Specificeer eventueel meerdere kandidaten voor de afbeelding via het `srcSet`-attribuut.
+  Bijvoorbeeld een kleine, middelgrote en grote variant voor de diverse schermformaten.
+  Zo voorkom je het onnodige downloaden van grote bestanden.
+  Doe dit vooral voor de hoofdafbeelding van een pagina,
+  daar is het verschil tussen de formaten op een smal en breed scherm het grootst.
 - Zorg ervoor dat de afbeelding een beeldverhouding heeft die ondersteund wordt door het [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
 
 ## Relevante WCAG-eisen

package/src/{image → components/image}/image.scss

@@ -8,6 +8,10 @@
   height: auto; /* [1] */
   max-width: 100%; /* [1] */
   vertical-align: middle; /* [2] */
+
+  &--cover {
+    object-fit: cover;
+  }
 }
 
 // [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes

package/src/{index.scss → components/index.scss}

@@ -4,6 +4,12 @@
  */
 
 /* Append here */
+@import "./skip-link/skip-link";
+@import "./overlap/overlap";
+@import "./header/header";
+@import "./mark/mark";
+@import "./text-input/text-input";
+@import "./search-field/search-field";
 @import "./logo/logo";
 @import "./dialog/dialog";
 @import "./image/image";
@@ -18,9 +24,8 @@
 @import "./checkbox/checkbox";
 @import "./form-label/form-label";
 @import "./grid/grid";
-@import "./grid/grid-cell";
 @import "./heading/heading";
-@import "./highlight/highlight";
+@import "./spotlight/spotlight";
 @import "./icon/icon";
 @import "./link/link";
 @import "./ordered-list/ordered-list";

package/src/{link → components/link}/link.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -24,8 +22,9 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-narrow-font-size);
-  line-height: var(--amsterdam-link-standalone-line-height);
+  font-size: var(--amsterdam-link-standalone-spacious-font-size);
+  line-height: var(--amsterdam-link-standalone-spacious-line-height);
+  text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
 
@@ -34,8 +33,9 @@
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-link-standalone-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-standalone-compact-font-size);
+    line-height: var(--amsterdam-link-standalone-compact-line-height);
   }
 }
 
@@ -43,11 +43,12 @@
   font-family: var(--amsterdam-link-inline-font-family);
   font-size: var(--amsterdam-link-inline-font-size);
   line-height: var(--amsterdam-link-inline-line-height);
-  text-decoration: var(--amsterdam-link-inline-text-decoration);
+  text-decoration-line: var(--amsterdam-link-inline-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
 
   &:hover {
-    text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness);
     text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
   }
 
@@ -59,19 +60,20 @@
 .amsterdam-link--in-list {
   align-items: flex-start;
   display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-narrow-font-size);
+  font-size: var(--amsterdam-link-in-list-spacious-font-size);
   gap: var(--amsterdam-link-in-list-gap);
-  line-height: var(--amsterdam-link-in-list-line-height);
-  text-decoration: var(--amsterdam-link-in-list-text-decoration);
+  line-height: var(--amsterdam-link-in-list-spacious-line-height);
+  text-decoration-line: var(--amsterdam-link-in-list-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-link-in-list-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
 
   &:hover {
-    text-decoration: var(--amsterdam-link-in-list-hover-text-decoration);
-    text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
+    text-decoration-line: var(--amsterdam-link-in-list-hover-text-decoration-line);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-link-in-list-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-in-list-compact-font-size);
+    line-height: var(--amsterdam-link-in-list-compact-line-height);
   }
 }
 
@@ -106,13 +108,3 @@
     color: var(--amsterdam-link-on-background-light-visited-color);
   }
 }
-
-.amsterdam-link--inline.amsterdam-link--on-background-dark,
-.amsterdam-link--inline.amsterdam-link--on-background-light {
-  text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
-  text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
-
-  &:hover {
-    text-decoration: var(--amsterdam-link-inline-text-decoration);
-  }
-}

package/src/{logo → components/logo}/logo.scss

@@ -4,6 +4,7 @@
  */
 
 .amsterdam-logo {
+  display: block;
   height: var(--amsterdam-logo-height);
 }
 

package/src/components/mark/README.md

@@ -0,0 +1,18 @@
+# Mark
+
+Markeert een fragment tekst met een gele achtergrond.
+Het zorgt voor sterke nadruk op de tekst en leidt de aandacht ernaartoe.
+
+## Richtlijnen
+
+### Zo gebruiken
+
+- Maximaal 1 markering per pagina.
+  De voorkeur is geen markering.
+- Maximaal 1 zin.
+
+### Dit vermijden
+
+- Niet in de titel en subtitels gebruiken.
+  Zorg voor een belangrijke, pakkende titel als de hele paragraaf belangrijk is.
+- Mag niet voor een hele paragraaf gebruikt worden.

package/src/components/mark/mark.scss

@@ -0,0 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-mark {
+  background-color: var(--amsterdam-mark-background-color);
+}

package/src/{ordered-list → components/ordered-list}/ordered-list.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 /** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
@@ -26,15 +24,11 @@
 .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
   color: var(--amsterdam-ordered-list-color);
   font-family: var(--amsterdam-ordered-list-font-family);
-  font-size: var(--amsterdam-ordered-list-narrow-font-size);
+  font-size: var(--amsterdam-ordered-list-spacious-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-line-height);
+  line-height: var(--amsterdam-ordered-list-spacious-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-ordered-list-wide-font-size);
-  }
-
   /** List items are responsible for indentation and marker positioning. */
   .amsterdam-ordered-list__item {
     margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
@@ -51,3 +45,8 @@
     padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
   }
 }
+
+.amsterdam-theme--compact .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
+  font-size: var(--amsterdam-ordered-list-compact-font-size);
+  line-height: var(--amsterdam-ordered-list-compact-line-height);
+}

package/src/components/overlap/README.md

@@ -0,0 +1,3 @@
+# Overlap
+
+Toont twee of meer componenten over elkaar heen.

package/src/components/overlap/overlap.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-overlap {
+  display: grid;
+
+  > * {
+    grid-area: 1 / -1;
+  }
+}

package/src/{page-heading → components/page-heading}/page-heading.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,15 +14,16 @@
   break-inside: avoid;
   color: var(--amsterdam-page-heading-color);
   font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-narrow-font-size);
+  font-size: var(--amsterdam-page-heading-spacious-font-size);
   font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-page-heading-wide-font-size);
-  }
+  line-height: var(--amsterdam-page-heading-spacious-line-height);
 
   @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-page-heading-compact-font-size);
+    line-height: var(--amsterdam-page-heading-compact-line-height);
+  }
 }
 
 .amsterdam-page-heading--inverse-color {

package/src/{page-menu → components/page-menu}/README.md

@@ -13,3 +13,5 @@ Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uits
 ## Relevante WCAG eisen
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
+
+PageMenu 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.

package/src/{page-menu → components/page-menu}/page-menu.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset-list {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,41 +14,41 @@
   -webkit-text-size-adjust: 100%;
 }
 
-@mixin reset-button {
-  background-color: transparent;
-  border: 0;
-  margin-block: 0;
-  padding-inline: 0;
-}
-
 .amsterdam-page-menu {
   align-items: center;
   column-gap: var(--amsterdam-page-menu-column-gap);
   display: flex;
   flex-direction: row;
-  flex-wrap: wrap;
   list-style: none;
   row-gap: var(--amsterdam-page-menu-row-gap);
 
   @include reset-list;
 }
 
+.amsterdam-page-menu--align-end {
+  justify-content: end;
+}
+
 @mixin page-menu-item {
   color: var(--amsterdam-page-menu-item-color);
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-narrow-font-size);
+  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
   font-weight: var(--amsterdam-page-menu-item-font-weight);
   gap: var(--amsterdam-page-menu-item-gap);
-  line-height: var(--amsterdam-page-menu-item-line-height);
-  outline-offset: var(--amsterdam-focus-outline-offset);
+  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  outline-offset: var(--amsterdam-page-menu-item-outline-offset);
   text-align: center;
-  text-decoration: var(--amsterdam-page-menu-item-text-decoration);
+  text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
   touch-action: manipulation;
+  white-space: nowrap;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-page-menu-item-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-page-menu-item-compact-font-size);
+    line-height: var(--amsterdam-page-menu-item-compact-line-height);
   }
 }
 
@@ -59,21 +57,12 @@
   @include reset-item;
 }
 
-.amsterdam-page-menu__button {
-  cursor: pointer;
-
-  @include reset-item;
-  @include reset-button;
-  @include page-menu-item;
-}
-
 .amsterdam-page-menu__link:hover,
 .amsterdam-page-menu__button:hover {
   color: var(--amsterdam-page-menu-item-hover-color);
-  text-decoration: var(--amsterdam-page-menu-item-hover-text-decoration);
+  text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
 }
 
-.amsterdam-page-menu__link svg,
-.amsterdam-page-menu__button svg {
+.amsterdam-page-menu__link svg {
   color: currentColor;
 }

package/src/{pagination → components/pagination}/pagination.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin list-reset {
   list-style-type: none;
   margin-block: 0;
@@ -16,15 +14,16 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-narrow-font-size);
+  font-size: var(--amsterdam-pagination-spacious-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-line-height);
+  line-height: var(--amsterdam-pagination-spacious-line-height);
 
   @include list-reset;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-pagination-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-pagination-compact-font-size);
+    line-height: var(--amsterdam-pagination-compact-line-height);
   }
 }
 
@@ -45,13 +44,14 @@
   gap: 0.5rem;
   outline-offset: var(--amsterdam-pagination-button-outline-offset);
   padding-inline: 0.75rem;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);
   touch-action: manipulation;
 
   &:hover {
     color: var(--amsterdam-pagination-button-hover-color);
-    text-decoration: underline;
+    text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line);
   }
 
   &:disabled {