@amsterdam/design-system-css 0.4.0 → 0.6.0

package/src/components/heading/heading.scss

@@ -1,8 +1,10 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,67 +18,38 @@
   font-family: var(--amsterdam-heading-font-family);
   font-weight: var(--amsterdam-heading-font-weight);
 
+  @include hyphenation;
   @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);
-  }
+  font-size: var(--amsterdam-heading-level-1-font-size);
+  line-height: var(--amsterdam-heading-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);
-  }
+  font-size: var(--amsterdam-heading-level-2-font-size);
+  line-height: var(--amsterdam-heading-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);
-  }
+  font-size: var(--amsterdam-heading-level-3-font-size);
+  line-height: var(--amsterdam-heading-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);
-  }
+  font-size: var(--amsterdam-heading-level-4-font-size);
+  line-height: var(--amsterdam-heading-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);
-  }
+  font-size: var(--amsterdam-heading-level-5-font-size);
+  line-height: var(--amsterdam-heading-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);
-  }
+  font-size: var(--amsterdam-heading-level-6-font-size);
+  line-height: var(--amsterdam-heading-level-6-line-height);
 }
 
 .amsterdam-heading--inverse-color {

package/src/components/icon/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Icon
 
 Icons are visual symbols used to represent ideas, themes, or actions.
@@ -26,4 +28,4 @@ Icons are aligned to the left of the text by default and vertically centred to t
 
 Icons use the same text levels as all typographic components to determine their size.
 This ensures easy alignment between icons and text.
-[Refer to the typography documentation for more information](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).
+[Refer to the typography documentation for more information](/docs/docs-design-guidelines-typography--docs).

package/src/components/icon/icon.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-icon {
@@ -18,75 +18,37 @@
 }
 
 .amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
+  height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-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);
+  height: var(--amsterdam-icon-size-3-font-size);
+  width: var(--amsterdam-icon-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));
+  height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-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);
+  height: var(--amsterdam-icon-size-4-font-size);
+  width: var(--amsterdam-icon-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));
+  height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-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);
+  height: var(--amsterdam-icon-size-5-font-size);
+  width: var(--amsterdam-icon-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));
+  height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-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);
-  }
+  height: var(--amsterdam-icon-size-6-font-size);
+  width: var(--amsterdam-icon-size-6-font-size);
 }

package/src/components/icon-button/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Icon Button
 
 A button containing only an icon.
@@ -11,4 +13,4 @@ A button containing only an icon.
 
 ## Relevant WCAG Requirements
 
-The Icon Button follows [the same requirements and guidelines as a regular button](https://amsterdam.github.io/design-system/?path=/docs/react_buttons-button--docs).
+The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs).

package/src/components/icon-button/icon-button.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {

package/src/components/image/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Image
 
 Displays an image.
@@ -13,7 +15,7 @@ Displays an image.
   For example, provide small, medium, and large variants for various screen sizes.
   This prevents unnecessary downloading of large files.
   Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant.
-- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
+- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/components-layout-aspect-ratio--docs) component.
 
 ## Relevant WCAG Requirements
 

package/src/components/image/image.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-image {
@@ -15,6 +15,6 @@
 }
 
 // [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
-// [2] Remove ‘phantom’ whitespace
+// [2] Remove ‘phantom’ white space
 // [3] Italicise alt text to visually offset it from surrounding copy
 // Source: https://x.com/csswizardry/status/1717841334462005661

package/src/components/index.scss

@@ -1,9 +1,17 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 /* Append here */
+@import "./row/row";
+@import "./radio/radio";
+@import "./tabs/tabs";
+@import "./text-area/text-area";
+@import "./column/column";
+@import "./margin/margin";
+@import "./gap/gap";
+@import "./fieldset/fieldset";
 @import "./link-list/link-list";
 @import "./badge/badge";
 @import "./table/table";

package/src/components/link/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Link
 
 A link is a navigation element and can be used independently or inline with text.

package/src/components/link/link.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {
@@ -22,8 +22,8 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-spacious-font-size);
-  line-height: var(--amsterdam-link-standalone-spacious-line-height);
+  font-size: var(--amsterdam-link-standalone-font-size);
+  line-height: var(--amsterdam-link-standalone-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);
@@ -32,11 +32,6 @@
     text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-standalone-compact-font-size);
-    line-height: var(--amsterdam-link-standalone-compact-line-height);
-  }
 }
 
 .amsterdam-link--inline {
@@ -57,34 +52,6 @@
   }
 }
 
-.amsterdam-link--in-list {
-  align-items: flex-start;
-  display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-spacious-font-size);
-  gap: var(--amsterdam-link-in-list-gap);
-  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-line: var(--amsterdam-link-in-list-hover-text-decoration-line);
-  }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-in-list-compact-font-size);
-    line-height: var(--amsterdam-link-in-list-compact-line-height);
-  }
-}
-
-// Override for icon size
-.amsterdam-link--in-list__chevron {
-  span.amsterdam-icon svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
 

package/src/components/link-list/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Link List
 
 A collection of related links.
@@ -13,4 +15,4 @@ Therefore, it is blue and clickable.
 
 Use a Link List to present multiple links within a theme.
 
-For additional guidelines, refer to the [Link](?path=/docs/navigation-link--docs) component.
+For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

package/src/components/link-list/link-list.scss

@@ -1,8 +1,10 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2024 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset-list {
   box-sizing: border-box;
   list-style: none;
@@ -23,20 +25,15 @@
   color: var(--amsterdam-link-list-link-color);
   display: inline-flex;
   font-family: var(--amsterdam-link-list-link-font-family);
-  font-size: var(--amsterdam-link-list-link-spacious-medium-font-size);
+  font-size: var(--amsterdam-link-list-link-medium-font-size);
   font-weight: var(--amsterdam-link-list-link-font-weight);
   gap: var(--amsterdam-link-list-link-gap);
-  line-height: var(--amsterdam-link-list-link-spacious-medium-line-height);
+  line-height: var(--amsterdam-link-list-link-medium-line-height);
   outline-offset: var(--amsterdam-link-list-link-outline-offset);
   text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-medium-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-medium-line-height);
-  }
-
   &:hover {
     color: var(--amsterdam-link-list-link-hover-color);
     text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line);
@@ -44,23 +41,15 @@
 }
 
 .amsterdam-link-list__link--small {
-  font-size: var(--amsterdam-link-list-link-spacious-small-font-size);
-  line-height: var(--amsterdam-link-list-link-spacious-small-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-small-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-small-line-height);
-  }
+  font-size: var(--amsterdam-link-list-link-small-font-size);
+  line-height: var(--amsterdam-link-list-link-small-line-height);
 }
 
 .amsterdam-link-list__link--large {
-  font-size: var(--amsterdam-link-list-link-spacious-large-font-size);
-  line-height: var(--amsterdam-link-list-link-spacious-large-line-height);
+  font-size: var(--amsterdam-link-list-link-large-font-size);
+  line-height: var(--amsterdam-link-list-link-large-line-height);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-large-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-large-line-height);
-  }
+  @include hyphenation;
 }
 
 .amsterdam-link-list__link--on-background-dark {

package/src/components/logo/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Logo
 
 The City’s logo includes an icon (3 Saint Andrew’s crosses) and a wordmark (Gemeente Amsterdam).
@@ -14,12 +16,13 @@ In the meantime, you can download an image of this logo from [Stijlweb](https://
 
 ## Exception
 
-Use a sub-brand logo if the website is owned by one of the 4 sub-brands.
+Use a sub-brand logo if the website is owned by one of the 5 sub-brands.
 They have a separate status because of their unique service provision not directly associated with the City.
 
 The sub-brands are:
 
 - GGD Amsterdam
+- Museum Weesp
 - Stadsarchief
 - Stadsbank van Lening
 - VGA Verzekeringen

package/src/components/logo/logo.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-logo {

package/src/components/margin/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Margin
+
+Use these utility classes to add white space below a single element.

package/src/components/margin/margin.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+@each $size in map-keys($amsterdam-sizes) {
+  .amsterdam-mb--#{$size} {
+    margin-block-end: var(--amsterdam-margin-#{$size}) !important;
+  }
+}

package/src/components/mark/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Mark
 
 Highlights a text fragment using a yellow background.

package/src/components/mark/mark.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-mark {

package/src/components/mega-menu/README.md

@@ -1 +1,3 @@
+<!-- @license CC0-1.0 -->
+
 # Mega Menu

package/src/components/mega-menu/mega-menu.scss

@@ -1,11 +1,13 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-mega-menu__list-category {
   column-gap: var(--amsterdam-mega-menu-list-category-column-gap);
   column-width: var(--amsterdam-mega-menu-list-category-column-width);
+
+  // TODO Move to bottom margin of heading
   padding-block-start: var(--amsterdam-mega-menu-list-category-padding-block-start);
 
   &:not(:last-child) {

package/src/components/ordered-list/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Ordered List
 
 An ordered list is a vertical group of related content with an order.

package/src/components/ordered-list/ordered-list.scss

@@ -1,9 +1,9 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
-/** Apply border box sizing, reset whitespace and list styles. */
+/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style-type: none;
@@ -24,9 +24,9 @@
 .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-spacious-font-size);
+  font-size: var(--amsterdam-ordered-list-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-spacious-line-height);
+  line-height: var(--amsterdam-ordered-list-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -36,6 +36,10 @@
   }
 }
 
+.amsterdam-ordered-list--inverse-color:not(.amsterdam-ordered-list--no-markers) {
+  color: var(--amsterdam-ordered-list-inverse-color);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list {
   list-style-type: var(--amsterdam-ordered-list-ordered-list-list-style-type);
@@ -45,8 +49,3 @@
     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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Overlap
 
 Displays two or more components on top of each other.

package/src/components/overlap/overlap.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-overlap {

package/src/components/page-heading/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Page Heading
 
 The page heading component is a prominent text at the beginning of a page, immediately after the header.
@@ -14,4 +16,4 @@ Use this component for a name, title, or motto.
 The page heading component is a variant of a heading level 1 with a distinct style.
 When using this component, ensure that the heading hierarchy of the page remains logical.
 
-For this component, the same WCAG requirements apply as for [the heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+For this component, the same WCAG requirements apply as for [the heading component](/docs/components-text-heading--docs).

package/src/components/page-heading/page-heading.scss

@@ -1,8 +1,10 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,16 +16,12 @@
   break-inside: avoid;
   color: var(--amsterdam-page-heading-color);
   font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-spacious-font-size);
+  font-size: var(--amsterdam-page-heading-font-size);
   font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-spacious-line-height);
+  line-height: var(--amsterdam-page-heading-line-height);
 
+  @include hyphenation;
   @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/components/page-menu/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Page Menu
 
 A small set of links for use in the Header and Footer.
@@ -15,4 +17,4 @@ A small set of links for use in the Header and Footer.
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
 
-PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

package/src/components/page-menu/page-menu.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset-list {
@@ -34,10 +34,10 @@
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
+  font-size: var(--amsterdam-page-menu-item-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-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   outline-offset: var(--amsterdam-page-menu-item-outline-offset);
   text-align: center;
   text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
@@ -45,11 +45,6 @@
   text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
   touch-action: manipulation;
   white-space: nowrap;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-page-menu-item-compact-font-size);
-    line-height: var(--amsterdam-page-menu-item-compact-line-height);
-  }
 }
 
 .amsterdam-page-menu__link {