@amsterdam/design-system-css 0.14.1 → 0.16.0

package/src/components/grid/grid.scss

@@ -18,52 +18,52 @@ $ams-grid-column-count: 12;
   @include ams-grid--gap-vertical--none;
 }
 
-.ams-grid--gap-vertical--small {
-  @include ams-grid--gap-vertical--small;
-}
-
 .ams-grid--gap-vertical--large {
   @include ams-grid--gap-vertical--large;
 }
 
-// Grid padding
-
-.ams-grid--padding-bottom--small {
-  @include ams-grid--padding-bottom--small;
+.ams-grid--gap-vertical--2x-large {
+  @include ams-grid--gap-vertical--2x-large;
 }
 
-.ams-grid--padding-bottom--medium {
-  @include ams-grid--padding-bottom--medium;
-}
+// Grid padding
 
 .ams-grid--padding-bottom--large {
   @include ams-grid--padding-bottom--large;
 }
 
-.ams-grid--padding-top--small {
-  @include ams-grid--padding-top--small;
+.ams-grid--padding-bottom--x-large {
+  @include ams-grid--padding-bottom--x-large;
 }
 
-.ams-grid--padding-top--medium {
-  @include ams-grid--padding-top--medium;
+.ams-grid--padding-bottom--2x-large {
+  @include ams-grid--padding-bottom--2x-large;
 }
 
 .ams-grid--padding-top--large {
   @include ams-grid--padding-top--large;
 }
 
-.ams-grid--padding-vertical--small {
-  @include ams-grid--padding-vertical--small;
+.ams-grid--padding-top--x-large {
+  @include ams-grid--padding-top--x-large;
 }
 
-.ams-grid--padding-vertical--medium {
-  @include ams-grid--padding-vertical--medium;
+.ams-grid--padding-top--2x-large {
+  @include ams-grid--padding-top--2x-large;
 }
 
 .ams-grid--padding-vertical--large {
   @include ams-grid--padding-vertical--large;
 }
 
+.ams-grid--padding-vertical--x-large {
+  @include ams-grid--padding-vertical--x-large;
+}
+
+.ams-grid--padding-vertical--2x-large {
+  @include ams-grid--padding-vertical--2x-large;
+}
+
 // Column span
 // The order of these declaration blocks ensures the intended specificity.
 

package/src/components/heading/README.md

@@ -2,16 +2,16 @@
 
 # Heading
 
-Describes the content that follows it.
-Use Headings to allow the user to grasp the structure of the page quickly.
+Introduces a page section and describes the following content.
 
 ## Guidelines
 
-- A heading describes the content beneath it.
-- Every page should contain one Heading with level 1.
-- Do not skip heading levels, e.g. a level 2 Heading should be followed by one with level 3, not level 4.
-- Do not use a Heading for formatting and styling, but to represent the page’s structure.
-  Users of screen readers use headings to navigate the page – an incorrect hierarchy can confuse them.
+- Use Headings to allow the user to quickly grasp the structure of the page.
+- All headings together represent the document’s structure. Users of screen readers may use headings to navigate the page – an incorrect hierarchy will confuse them.
+- Every page should contain one heading with level 1.
+  Do not skip heading levels, e.g. a level 2 Heading should be followed by one with level 3, not level 4.
+  The `level` prop doesn’t have a default value; the correct level should be determined for each instance.
+- Don’t use a Heading just for its visual appearance.
 
 ## Relevant WCAG requirements
 

package/src/components/heading/heading.scss

@@ -17,42 +17,43 @@
   color: var(--ams-heading-color);
   font-family: var(--ams-heading-font-family);
   font-weight: var(--ams-heading-font-weight);
+  text-wrap: var(--ams-heading-text-wrap);
 
   @include hyphenation;
   @include text-rendering;
   @include reset-hx;
 }
 
-.ams-heading--level-1 {
-  font-size: var(--ams-heading-level-1-font-size);
-  line-height: var(--ams-heading-level-1-line-height);
+.ams-heading--1 {
+  font-size: var(--ams-heading-1-font-size);
+  line-height: var(--ams-heading-1-line-height);
 }
 
-.ams-heading--level-2 {
-  font-size: var(--ams-heading-level-2-font-size);
-  line-height: var(--ams-heading-level-2-line-height);
+.ams-heading--2 {
+  font-size: var(--ams-heading-2-font-size);
+  line-height: var(--ams-heading-2-line-height);
 }
 
-.ams-heading--level-3 {
-  font-size: var(--ams-heading-level-3-font-size);
-  line-height: var(--ams-heading-level-3-line-height);
+.ams-heading--3 {
+  font-size: var(--ams-heading-3-font-size);
+  line-height: var(--ams-heading-3-line-height);
 }
 
-.ams-heading--level-4 {
-  font-size: var(--ams-heading-level-4-font-size);
-  line-height: var(--ams-heading-level-4-line-height);
+.ams-heading--4 {
+  font-size: var(--ams-heading-4-font-size);
+  line-height: var(--ams-heading-4-line-height);
 }
 
-.ams-heading--level-5 {
-  font-size: var(--ams-heading-level-5-font-size);
-  line-height: var(--ams-heading-level-5-line-height);
+.ams-heading--5 {
+  font-size: var(--ams-heading-5-font-size);
+  line-height: var(--ams-heading-5-line-height);
 }
 
-.ams-heading--level-6 {
-  font-size: var(--ams-heading-level-6-font-size);
-  line-height: var(--ams-heading-level-6-line-height);
+.ams-heading--6 {
+  font-size: var(--ams-heading-6-font-size);
+  line-height: var(--ams-heading-6-line-height);
 }
 
-.ams-heading--inverse-color {
+.ams-heading--inverse {
   color: var(--ams-heading-inverse-color);
 }

package/src/components/icon/README.md

@@ -12,10 +12,10 @@ Use an icon to support textual interactive elements like buttons and links.
 Always try to provide accompanying text for an icon.
 Only use icons without accompanying text if they adhere to international standards, such as menu (hamburger icon), search (magnifying glass), next, previous, play, pause, etc.
 
-## Color
+## Colour
 
 Icons are black or white.
-When used as part of an interactive element, they are dark blue.
+When used as part of an interactive element, they are blue.
 When disabled, they are grey.
 They must adhere to the same contrast ratio for accessibility as typography against a background colour.
 The icon defaults to the colour of the container it is in.
@@ -26,9 +26,9 @@ Icons are aligned to the left of the text by default and vertically centred to t
 
 ## Size
 
-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/brand-design-tokens-text--docs).
+Icons have extra whitespace at their top and bottom to match the line height of text components.
+Specify the appropriate size to pair an icon with small or large body text or with a heading.
+[Read more in the typography documentation](/docs/brand-design-tokens-typography--docs).
 
 ## Overview
 

package/src/components/icon/icon.scss

@@ -4,55 +4,69 @@
  */
 
 .ams-icon {
+  --ams-line-height: var(--ams-icon-line-height);
+
   align-items: center;
+  align-self: baseline; // Aligns the icon with text in flex or grid context
   display: inline-flex;
-}
+  font-size: var(--ams-icon-font-size);
+  line-height: var(--ams-line-height);
+
+  &::after {
+    content: "\00200B"; // This zero width space enables baseline alignment.
+  }
 
-.ams-icon svg {
-  fill: currentColor;
+  svg {
+    fill: currentColor;
+    inline-size: 1em;
+  }
 }
 
-.ams-icon--inverse-color {
+.ams-icon--inverse {
   color: var(--ams-icon-inverse-color);
 }
 
 .ams-icon--square {
-  aspect-ratio: 1 / 1;
+  inline-size: calc(1em * var(--ams-line-height));
   justify-content: center;
 }
 
-.ams-icon--size-3 {
-  block-size: calc(var(--ams-icon-size-3-font-size) * var(--ams-icon-size-3-line-height));
-}
+.ams-icon--small {
+  --ams-line-height: var(--ams-icon-small-line-height);
 
-.ams-icon--size-3 svg {
-  block-size: var(--ams-icon-size-3-font-size);
-  inline-size: var(--ams-icon-size-3-font-size);
+  font-size: var(--ams-icon-small-font-size);
 }
 
-.ams-icon--size-4 {
-  block-size: calc(var(--ams-icon-size-4-font-size) * var(--ams-icon-size-4-line-height));
-}
+.ams-icon--large {
+  --ams-line-height: var(--ams-icon-large-line-height);
 
-.ams-icon--size-4 svg {
-  block-size: var(--ams-icon-size-4-font-size);
-  inline-size: var(--ams-icon-size-4-font-size);
+  font-size: var(--ams-icon-large-font-size);
 }
 
-.ams-icon--size-5 {
-  block-size: calc(var(--ams-icon-size-5-font-size) * var(--ams-icon-size-5-line-height));
+.ams-icon--heading-3 {
+  --ams-line-height: var(--ams-icon-heading-3-line-height);
+
+  font-size: var(--ams-icon-heading-3-font-size);
+  line-height: var(--ams-icon-heading-3-line-height);
 }
 
-.ams-icon--size-5 svg {
-  block-size: var(--ams-icon-size-5-font-size);
-  inline-size: var(--ams-icon-size-5-font-size);
+.ams-icon--heading-4 {
+  --ams-line-height: var(--ams-icon-heading-4-line-height);
+
+  font-size: var(--ams-icon-heading-4-font-size);
+  line-height: var(--ams-icon-heading-4-line-height);
 }
 
-.ams-icon--size-6 {
-  block-size: calc(var(--ams-icon-size-6-font-size) * var(--ams-icon-size-6-line-height));
+.ams-icon--heading-5 {
+  --ams-line-height: var(--ams-icon-heading-5-line-height);
+
+  font-size: var(--ams-icon-heading-5-font-size);
+  line-height: var(--ams-icon-heading-5-line-height);
 }
 
-.ams-icon--size-6 svg {
-  block-size: var(--ams-icon-size-6-font-size);
-  inline-size: var(--ams-icon-size-6-font-size);
+.ams-icon--heading-6 {
+  --ams-line-height: var(--ams-icon-heading-6-line-height);
+
+  font-size: var(--ams-icon-heading-6-font-size);
+  line-height: var(--ams-icon-heading-6-line-height);
 }

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

@@ -4,7 +4,7 @@
  */
 
 @mixin reset-button {
-  border: 0;
+  border: none;
   margin-block: 0; // [1]
   margin-inline: 0; // [1]
   padding-block: 0;
@@ -16,7 +16,8 @@
 .ams-icon-button {
   background-color: transparent;
   color: var(--ams-icon-button-color);
-  cursor: pointer;
+  cursor: var(--ams-icon-button-cursor);
+  display: inline-flex;
   outline-offset: var(--ams-icon-button-outline-offset);
   touch-action: manipulation;
 
@@ -30,35 +31,35 @@
   &:disabled {
     background-color: transparent;
     color: var(--ams-icon-button-disabled-color);
-    cursor: not-allowed;
+    cursor: var(--ams-icon-button-disabled-cursor);
   }
 }
 
-.ams-icon-button--contrast-color {
-  color: var(--ams-icon-button-contrast-color-color);
+.ams-icon-button--contrast {
+  color: var(--ams-icon-button-contrast-color);
 
   &:hover {
-    background-color: var(--ams-icon-button-contrast-color-hover-background-color);
-    color: var(--ams-icon-button-contrast-color-hover-color);
+    background-color: var(--ams-icon-button-contrast-hover-background-color);
+    color: var(--ams-icon-button-contrast-hover-color);
   }
 
   &:disabled {
     background-color: transparent;
-    color: var(--ams-icon-button-contrast-color-disabled-color);
+    color: var(--ams-icon-button-contrast-disabled-color);
   }
 }
 
-.ams-icon-button--inverse-color {
-  background-color: var(--ams-icon-button-inverse-color-background-color);
-  color: var(--ams-icon-button-inverse-color-color);
+.ams-icon-button--inverse {
+  background-color: var(--ams-icon-button-inverse-background-color);
+  color: var(--ams-icon-button-inverse-color);
 
   &:hover {
-    background-color: var(--ams-icon-button-inverse-color-hover-background-color);
-    color: var(--ams-icon-button-inverse-color-hover-color);
+    background-color: var(--ams-icon-button-inverse-hover-background-color);
+    color: var(--ams-icon-button-inverse-hover-color);
   }
 
   &:disabled {
-    background-color: var(--ams-icon-button-inverse-color-disabled-background-color);
-    color: var(--ams-icon-button-inverse-color-disabled-color);
+    background-color: var(--ams-icon-button-inverse-disabled-background-color);
+    color: var(--ams-icon-button-inverse-disabled-color);
   }
 }

package/src/components/image-slider/README.md

@@ -19,7 +19,7 @@ The images do not slide automatically.
 - Feature the most essential image first.
 - Assume that some or many users will not navigate between the slides and only see the first image.
   Display all images separately if you want each of them to receive attention.
-- A full-width Image Slider should run from one edge of the Screen to the other;
+- A full-width Image Slider should run from one edge of the [Page](/docs/components-containers-page--docs) container to the other;
   position it next to a Grid, not in a Cell spanning all columns.
   Smaller sliders are fine in a Grid Cell.
 - Consult the [Image](/docs/components-media-image--docs) docs for guidelines on the individual images.

package/src/components/image-slider/image-slider.scss

@@ -2,6 +2,7 @@
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
+
 @use "../../common/breakpoint" as *;
 
 .ams-image-slider {
@@ -66,19 +67,26 @@
   max-inline-size: 100%;
 }
 
+@mixin reset-button {
+  border: none;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  padding-block: 0;
+  padding-inline: 0;
+}
+
 .ams-image-slider__thumbnail {
+  aspect-ratio: var(--ams-image-aspect-ratio); // Use the same default aspect ratio as the Image component
   background-color: var(--ams-image-slider-thumbnails-thumbnail-background-color);
   background-position: center;
   background-size: cover;
-  border: none;
   cursor: var(--ams-image-slider-thumbnails-thumbnail-cursor);
   opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
   outline-offset: var(--ams-button-outline-offset);
-  padding-block: 0;
-  padding-inline: 0;
   position: relative;
   scroll-snap-align: start;
 
+  @include reset-button;
+
   &:hover {
     opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
   }

package/src/components/index.scss

@@ -28,38 +28,37 @@
 @use "figure/figure";
 @use "file-input/file-input";
 @use "file-list/file-list";
-@use "footer/footer";
-@use "form-error-list/form-error-list";
 @use "gap/gap";
 @use "grid/grid";
-@use "header/header";
 @use "heading/heading";
 @use "hint/hint";
 @use "icon-button/icon-button";
 @use "icon/icon";
 @use "image-slider/image-slider";
 @use "image/image";
+@use "invalid-form-alert/invalid-form-alert";
 @use "label/label";
 @use "link-list/link-list";
 @use "link/link";
 @use "logo/logo";
 @use "margin/margin";
 @use "mark/mark";
-@use "mega-menu/mega-menu";
 @use "ordered-list/ordered-list";
 @use "overlap/overlap";
+@use "page/page";
+@use "page-footer/page-footer";
+@use "page-header/page-header";
 @use "page-heading/page-heading";
-@use "page-menu/page-menu";
 @use "pagination/pagination";
 @use "paragraph/paragraph";
 @use "password-input/password-input";
 @use "radio/radio";
 @use "row/row";
-@use "screen/screen";
 @use "search-field/search-field";
 @use "select/select";
 @use "skip-link/skip-link";
 @use "spotlight/spotlight";
+@use "standalone-link/standalone-link";
 @use "switch/switch";
 @use "table-of-contents/table-of-contents";
 @use "table/table";
@@ -67,6 +66,5 @@
 @use "text-area/text-area";
 @use "text-input/text-input";
 @use "time-input/time-input";
-@use "top-task-link/top-task-link";
 @use "unordered-list/unordered-list";
 @use "visually-hidden/visually-hidden";

package/src/components/{form-error-list → invalid-form-alert}/README.md

@@ -1,27 +1,27 @@
 <!-- @license CC0-1.0 -->
 
-# Form Error List
+# Invalid Form Alert
 
 Use this component at the top of a page to summarise any errors a user has made.
-When a user makes an error, you must show both a Form Error List and an Error Message above each answer that contains an error.
+When a user makes an error, you must show both a Invalid Form Alert and an Error Message above each answer that contains an error.
 
 ## Guidelines
 
-- Always show a Form Error List when there is a validation error, even if there’s only one.
-- You must link the errors in the Form Error List to the answer they relate to (see below).
+- Always show an Invalid Form Alert when there is a validation error, even if there’s only one.
+- You must link the errors in the Invalid Form Alert to the answer they relate to (see below).
 
-## Linking from the Form Error List to each answer
+## Linking from the Invalid Form Alert to each answer
 
-For questions that require a user to answer using a single field, like a file upload, select, textarea, text input or character count, link to the `id` of that field.
+For questions that require a user to answer using a single field, like a file upload, select, textarea or text input, link to the `id` of that field.
 
 When a user has to enter their answer into multiple fields, such as day, month and year fields, link to the `id` of the first field that contains an error.
 If you do not know which field contains an error, link to the `id` of the first field.
 
 For questions that require a user to select one or more options from a list using Radios or Checkboxes, link to the `id` of the first Radio or Checkbox.
 
-## Where to put the Form Error List
+## Where to put the Invalid Form Alert
 
-Put the Form Error List directly above the first question on the page. Place it outside of the `<form>`-tag, [to make sure screen readers do not skip it](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/#plaats-de-informatie-over-waar-de-gebruiker-is-in-de-stappen-boven-het-formulier).
+Put the Invalid Form Alert directly above the first question on the page. Place it outside of the `<form>`-tag, [to make sure screen readers do not skip it](https://nldesignsystem.nl/richtlijnen/formulieren/meerdere-stappen/#plaats-de-informatie-over-waar-de-gebruiker-is-in-de-stappen-boven-het-formulier).
 
 ## Error count in document title
 
@@ -39,7 +39,7 @@ Note: this functionality has been disabled on this page, to prevent unexpected f
 
 Pay extra attention to these parts:
 
-- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the Form Error List depends on where in the page it is placed, this may differ per page.
+- [WCAG requirement 1.3.1](https://www.w3.org/TR/WCAG21/#info-and-relationships): the heading level of the Invalid Form Alert depends on where in the page it is placed, this may differ per page.
 
 ## References
 

package/src/components/{form-error-list/form-error-list.scss → invalid-form-alert/invalid-form-alert.scss}

@@ -1,14 +1,14 @@
-.ams-form-error-list {
-  outline-offset: var(--ams-form-error-list-outline-offset);
+.ams-invalid-form-alert {
+  outline-offset: var(--ams-invalid-form-alert-outline-offset);
 
   // In Chromium browsers, the outline overlaps with the border in this component.
   // We're not sure why, but to fix this we double the offset for Chromium browsers here.
   @supports (contain: paint) and (not (-moz-appearance: none)) {
-    outline-offset: calc(var(--ams-form-error-list-outline-offset) * 2);
+    outline-offset: calc(var(--ams-invalid-form-alert-outline-offset) * 2);
 
     // Reset for Safari
     @supports (font: -apple-system-body) {
-      outline-offset: var(--ams-form-error-list-outline-offset);
+      outline-offset: var(--ams-invalid-form-alert-outline-offset);
     }
   }
 }

package/src/components/label/label.scss

@@ -12,6 +12,7 @@
   font-size: var(--ams-label-font-size);
   font-weight: var(--ams-label-font-weight);
   line-height: var(--ams-label-line-height);
+  text-wrap: var(--ams-label-text-wrap);
 
   @include hyphenation;
   @include text-rendering;

package/src/components/link/README.md

@@ -7,16 +7,15 @@ It is the lightweight variant for navigation.
 
 ## Guidelines
 
-Use a link in the following cases:
-
-- To navigate to another page within the website or application
-- To navigate to another website (see [External links](#external-links))
-- To navigate to an element on the same page
-- To link to emails or phone numbers (start the link with `mailto:` or `tel:`)
-- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-buttons-action-group--docs).
-
-A link is a navigation component.
-Use a button instead of a link when an action is desired.
+- Use a link in the following cases:
+  - To navigate to another page within the website or application
+  - To navigate to another website (see [External links](#external-links))
+  - To navigate to an element on the same page
+  - To link to emails or phone numbers (start the link with `mailto:` or `tel:`)
+- A link is a navigation component.
+  Use a button instead of a link when an action is desired.
+- An icon can be added to links, positioned after the link.
+- Too many links on the same page may confuse the user.
 
 ### External links
 
@@ -28,7 +27,6 @@ For more information: [Links to cross-origin destinations are unsafe](https://de
 
 Visited links indicate that a user has already opened the link.
 We discourage using styles for visited links because they often make the page less clear and navigation more challenging.
-The inline link does have a visited style.
 It is not part of navigation elements that are frequently scanned.
 
 ### Using links with routing libraries

package/src/components/link/link.scss

@@ -3,73 +3,40 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-link {
   color: var(--ams-link-color);
   font-family: var(--ams-link-font-family);
+  font-size: var(--ams-link-font-size);
   font-weight: var(--ams-link-font-weight);
+  line-height: var(--ams-link-line-height);
   outline-offset: var(--ams-link-outline-offset);
+  text-decoration-thickness: var(--ams-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-text-underline-offset);
 
   @include text-rendering;
 
   &:hover {
     color: var(--ams-link-hover-color);
+    text-decoration-thickness: var(--ams-link-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-hover-text-underline-offset);
   }
 }
 
-.ams-link--standalone {
-  display: inline-block;
-  font-size: var(--ams-link-standalone-font-size);
-  line-height: var(--ams-link-standalone-line-height);
-  text-decoration-line: var(--ams-link-standalone-text-decoration-line);
-  text-decoration-thickness: var(--ams-link-standalone-text-decoration-thickness);
-  text-underline-offset: var(--ams-link-standalone-text-underline-offset);
+.ams-link--contrast {
+  color: var(--ams-link-contrast-color);
 
   &:hover {
-    text-decoration-thickness: var(--ams-link-standalone-hover-text-decoration-thickness);
-    text-underline-offset: var(--ams-link-standalone-hover-text-underline-offset);
+    color: var(--ams-link-contrast-hover-color);
   }
 }
 
-.ams-link--inline {
-  font-family: var(--ams-link-inline-font-family);
-  font-size: var(--ams-link-inline-font-size);
-  line-height: var(--ams-link-inline-line-height);
-  text-decoration-line: var(--ams-link-inline-text-decoration-line);
-  text-decoration-thickness: var(--ams-link-inline-text-decoration-thickness);
-  text-underline-offset: var(--ams-link-inline-text-underline-offset);
+.ams-link--inverse {
+  color: var(--ams-link-inverse-color);
 
   &:hover {
-    text-decoration-thickness: var(--ams-link-inline-hover-text-decoration-thickness);
-    text-underline-offset: var(--ams-link-inline-hover-text-underline-offset);
-  }
-
-  &:visited {
-    color: var(--ams-link-inline-visited-color);
-  }
-}
-
-.ams-link--contrast-color {
-  color: var(--ams-link-contrast-color-color);
-
-  &:hover {
-    color: var(--ams-link-contrast-color-hover-color);
-  }
-
-  &:visited {
-    color: var(--ams-link-contrast-color-visited-color);
-  }
-}
-
-.ams-link--inverse-color {
-  color: var(--ams-link-inverse-color-color);
-
-  &:hover {
-    color: var(--ams-link-inverse-color-hover-color);
-  }
-
-  &:visited {
-    color: var(--ams-link-inverse-color-visited-color);
+    color: var(--ams-link-inverse-hover-color);
   }
 }