@amsterdam/design-system-css 0.4.0 → 0.6.0

package/src/components/button/button.scss

@@ -1,49 +1,94 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
-@import "../../../node_modules/@utrecht/components/button/css";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-spacious-font-size);
-  line-height: var(--amsterdam-button-spacious-line-height);
+  border: none;
+  cursor: var(--amsterdam-button-cursor);
+  display: inline-flex;
+  font-family: var(--amsterdam-button-font-family);
+  font-size: var(--amsterdam-button-font-size);
+  gap: var(--amsterdam-button-gap);
+  line-height: var(--amsterdam-button-line-height);
+  outline-offset: var(--amsterdam-button-outline-offset);
+  padding-block: var(--amsterdam-button-padding-block);
+  padding-inline: var(--amsterdam-button-padding-inline);
+  touch-action: manipulation;
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: var(--amsterdam-button-disabled-cursor);
+  }
 
   @include reset;
+}
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
+@mixin amsterdam-button-forced-color-mode {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
   }
 }
 
+.amsterdam-button--busy {
+  cursor: var(--amsterdam-button-busy-cursor);
+}
+
+.amsterdam-button--primary {
+  background-color: var(--amsterdam-button-primary-background-color);
+  box-shadow: var(--amsterdam-button-primary-box-shadow);
+  color: var(--amsterdam-button-primary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-primary-disabled-background-color);
+    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--amsterdam-button-primary-hover-background-color);
+    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+  }
+
+  @include amsterdam-button-forced-color-mode;
+}
+
 .amsterdam-button--secondary {
+  background-color: var(--amsterdam-button-secondary-background-color);
   box-shadow: var(--amsterdam-button-secondary-box-shadow);
+  color: var(--amsterdam-button-secondary-color);
 
   &:disabled,
   [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-secondary-disabled-background-color);
     box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow);
+    color: var(--amsterdam-button-secondary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
     box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+    color: var(--amsterdam-button-secondary-hover-color);
   }
-}
 
-.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
+  @include amsterdam-button-forced-color-mode;
 }
 
 .amsterdam-button--tertiary {
+  background-color: var(--amsterdam-button-tertiary-background-color);
+  color: var(--amsterdam-button-tertiary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-tertiary-disabled-background-color);
+    color: var(--amsterdam-button-tertiary-disabled-color);
+  }
+
   &:hover:not(:disabled, [aria-disabled="true"]) {
     box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
+    color: var(--amsterdam-button-tertiary-hover-color);
   }
 }
-
-.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
-  box-shadow: none;
-}

package/src/components/card/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Card
 
 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.
@@ -7,15 +9,15 @@ The link is mandatory.
 ## Guidelines
 
 - 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 same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-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).
+  For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
+  You can also use a [regular link](/docs/components-navigation-link--docs).
 
 ## Screen Readers
 

package/src/components/card/card.scss

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

package/src/components/checkbox/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Checkbox
 
 Allows users to make a selection or agree to terms.
@@ -25,4 +27,4 @@ It is written in the first person when asking the user to agree to the terms and
 
 - [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.
 
-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.
+Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

package/src/components/checkbox/checkbox.scss

@@ -1,40 +1,35 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
 .amsterdam-checkbox__input {
-  appearance: none;
-  margin-block: 0;
-  margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
-
-  &:focus-visible + label {
-    outline: auto;
-    outline-offset: var(--amsterdam-checkbox-outline-offset);
-  }
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .amsterdam-checkbox__checkmark {
   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 {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
     border-color: var(--amsterdam-checkbox-checkmark-border-color);
     border-style: solid;
-    border-width: 2px;
+    border-width: 0.125rem;
     box-sizing: border-box;
     content: "";
     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 +41,11 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-spacious-font-size);
-  font-weight: 400;
+  font-size: var(--amsterdam-checkbox-font-size);
+  font-weight: var(--amsterdam-checkbox-font-weight);
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-spacious-line-height);
+  line-height: var(--amsterdam-checkbox-line-height);
+  outline-offset: var(--amsterdam-checkbox-outline-offset);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -59,15 +55,10 @@
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
-      border-width: 3px;
+      border-width: 0.1875rem;
     }
   }
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-checkbox-compact-font-size);
-    line-height: var(--amsterdam-checkbox-compact-line-height);
-  }
-
   @include reset;
 }
 
@@ -75,10 +66,7 @@
 .amsterdam-checkbox__input:checked {
   + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
     background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
+    background-image: var(--amsterdam-checkbox-checkmark-checked-background-image);
     border: none;
   }
 }
@@ -87,7 +75,7 @@
 .amsterdam-checkbox__input:indeterminate {
   + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
     background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
+    background-image: var(--amsterdam-checkbox-checkmark-indeterminate-background-image);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
@@ -111,7 +99,7 @@
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
-      border-width: 2px;
+      border-width: 0.125rem;
     }
   }
 }

package/src/components/column/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Column
+
+Stacks its children vertically and adds a vertical gap between them.

package/src/components/column/column.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+.amsterdam-column {
+  display: grid;
+}
+
+@each $size, $label in $amsterdam-sizes {
+  .amsterdam-column--#{$label} {
+    gap: var(--amsterdam-column-gap-#{$size});
+  }
+}

package/src/components/dialog/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # 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.

package/src/components/dialog/dialog.scss

@@ -1,9 +1,10 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/breakpoint";
+@import "../../common/hyphenation";
 
 .amsterdam-dialog {
   background-color: var(--amsterdam-dialog-background-color);
@@ -25,6 +26,8 @@
   gap: var(--amsterdam-dialog-form-gap);
   grid-template-rows: auto 1fr auto;
   max-block-size: var(--amsterdam-dialog-form-max-block-size);
+
+  // TODO Decide on these widths
   padding-block: var(--amsterdam-dialog-form-padding-block);
   padding-inline: var(--amsterdam-dialog-form-padding-inline);
 }
@@ -35,7 +38,6 @@
   max-block-size: 100%; /* safari */
   overflow-y: auto;
   overscroll-behavior-y: contain;
-  padding-inline-end: var(--amsterdam-dialog-article-padding-inline-end);
 }
 
 .amsterdam-dialog__header {
@@ -52,15 +54,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;
 }
 

package/src/components/fieldset/README.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Fieldset
+
+A component to group related form inputs.
+
+## Guidelines
+
+- Use Fieldset when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when asking for an address.
+- When grouping radio inputs, use `role="radiogroup"` on Fieldset to have this grouping explicitly announced as a radio group. Fieldset has a default role of `group`.
+
+## Relevant WCAG Requirements
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Fieldset labels the purpose of a group of inputs.
+
+## References
+
+- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71)

package/src/components/fieldset/fieldset.scss

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+
+@mixin reset {
+  border: none;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-fieldset {
+  @include reset;
+}
+
+@mixin legend-reset {
+  padding-inline: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-fieldset__legend {
+  color: var(--amsterdam-fieldset-legend-color);
+  font-family: var(--amsterdam-fieldset-legend-font-family);
+  font-size: var(--amsterdam-fieldset-legend-font-size);
+  font-weight: var(--amsterdam-fieldset-legend-font-weight);
+  line-height: var(--amsterdam-fieldset-legend-line-height);
+  margin-block-end: 1rem; /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
+
+  @include hyphenation;
+  @include legend-reset;
+}

package/src/components/footer/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Footer
 
 The footer is the closing section on every web page.

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Form Label
 
 Describes a form control.

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

@@ -1,8 +1,10 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright 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/gap/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Gap
+
+Use these utility classes to add consistent white space between a set of elements.

package/src/components/gap/gap.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+[class|="amsterdam-gap-"] {
+  display: grid !important;
+}
+
+@each $size in map-keys($amsterdam-sizes) {
+  .amsterdam-gap--#{$size} {
+    gap: var(--amsterdam-gap-#{$size}) !important;
+  }
+}

package/src/components/grid/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Grid
 
 Divides the screen into columns to align the elements of a page.
@@ -5,9 +7,9 @@ Divides the screen into columns to align the elements of a page.
 ## Usage
 
 Every page should use the grid as the foundation for its layout.
-It is placed directly within the [Screen](?path=/docs/layout-screen--docs).
+It is placed directly within the [Screen](/docs/components-layout-screen--docs).
 
-A [Footer](?path=/docs/react_containers-footer--docs) and a [Spotlight](?path=/docs/react_containers-spotlight--docs) are slightly wider than the grid.
+A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-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.
@@ -17,4 +19,4 @@ A cell often spans multiple columns of the grid.
 
 ## Design
 
-The [design choices](?path=/docs/docs-designrichtlijnen-grid--docs) are described in the design guidelines.
+The [design choices](/docs/docs-design-guidelines-grid--docs) are described in the design guidelines.

package/src/components/grid/grid.scss

@@ -1,18 +1,16 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
-
+  column-gap: var(--amsterdam-grid-column-gap);
   display: grid;
-  gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
+  row-gap: var(--amsterdam-grid-row-gap-md);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
@@ -23,57 +21,52 @@
   }
 }
 
-.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 {
-  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+  row-gap: var(--amsterdam-grid-row-gap-sm);
 }
 
 .amsterdam-grid--gap-vertical--large {
-  row-gap: calc(var(--amsterdam-grid-gap) * 2);
+  row-gap: var(--amsterdam-grid-row-gap-lg);
 }
 
 .amsterdam-grid--padding-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid__cell--span-all {

package/src/components/header/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Header
 
 Arranges the City’s logo, the title of the website, and a page menu.

package/src/components/header/header.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/breakpoint";
@@ -9,7 +9,7 @@
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  padding-block: 1rem;
+  padding-block: var(--amsterdam-header-padding-block);
   row-gap: 1.5rem;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
@@ -18,9 +18,9 @@
   }
 }
 
-.amsterdam-header__logo {
+.amsterdam-header__logo-link {
   flex: none;
-  outline-offset: var(--amsterdam-link-outline-offset);
+  outline-offset: var(--amsterdam-header-logo-link-outline-offset);
 }
 
 .amsterdam-header__links {
@@ -38,7 +38,7 @@
 
 .amsterdam-header__menu {
   flex: 1;
-  padding-inline-start: var(--amsterdam-page-menu-column-gap);
+  padding-inline-start: var(--amsterdam-page-menu-column-gap); // TODO Don’t use tokens of another component
   text-align: end;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
@@ -75,9 +75,9 @@
   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-size: var(--amsterdam-page-menu-item-font-size);
   font-weight: var(--amsterdam-page-menu-item-font-weight);
-  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   margin-block: 0;
   padding-inline: 0 30px;
   text-align: center;

package/src/components/heading/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Heading
 
 A heading conveys information about the content below it.