@amsterdam/design-system-css 3.0.0 → 3.2.0

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

@@ -4,15 +4,12 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  list-style: none;
-  margin-block: 0;
-  padding-inline: 0;
-}
-
 .ams-file-list {
+  @include reset-ul;
+
   display: flex;
   flex-direction: column;
   gap: var(--ams-file-list-gap);
@@ -20,7 +17,6 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 }
 
 .ams-file-list__item {

package/src/components/heading/heading.scss

@@ -4,13 +4,12 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-hx {
-  margin-block: 0;
-}
-
 .ams-heading {
+  @include reset-hx;
+
   box-sizing: border-box;
 
   /*
@@ -33,7 +32,6 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-hx;
 }
 
 .ams-heading--1 {

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

@@ -3,17 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset-button {
-  border: none;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-  padding-block: 0;
-  padding-inline: 0;
-
-  // [1] Remove the margin in older Safari.
-}
+@use "../../common/resets" as *;
 
 .ams-icon-button {
+  @include reset-button;
+
   background-color: transparent;
   color: var(--ams-icon-button-color);
   cursor: var(--ams-icon-button-cursor);
@@ -21,8 +15,6 @@
   outline-offset: var(--ams-icon-button-outline-offset);
   touch-action: manipulation;
 
-  @include reset-button;
-
   &:hover {
     background-color: var(--ams-icon-button-hover-background-color);
     color: var(--ams-icon-button-hover-color);

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

@@ -4,21 +4,16 @@
  */
 
 @use "../../common/breakpoint" as *;
+@use "../../common/resets" as *;
 
 .ams-image-slider {
   display: grid;
   gap: var(--ams-image-slider-gap);
-  grid-template-rows: 1fr auto;
 }
 
-.ams-image-slider__item {
+.ams-image-slider__slide {
   scroll-snap-align: center;
   scroll-snap-stop: always;
-
-  /** temporary fix for covering the entire gallery */
-  .ams-image {
-    inline-size: 100%;
-  }
 }
 
 .ams-image-slider__scroller {
@@ -76,17 +71,11 @@
   display: grid;
   gap: var(--ams-image-slider-thumbnails-gap);
   grid-template-columns: repeat(5, 1fr);
-  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 {
+  @include reset-button;
+
   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;
@@ -94,10 +83,6 @@
   cursor: var(--ams-image-slider-thumbnails-thumbnail-cursor);
   opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
   outline-offset: var(--ams-button-outline-offset);
-  position: relative;
-  scroll-snap-align: start;
-
-  @include reset-button;
 
   &:hover {
     opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
@@ -107,3 +92,7 @@
 .ams-image-slider__thumbnail--in-view {
   opacity: var(--ams-image-slider-thumbnails-thumbnail-in-view-opacity);
 }
+
+.ams-image-slider__figure {
+  margin-block-end: var(--ams-image-slider-figure-margin-block-end);
+}

package/src/components/index.scss

@@ -55,6 +55,7 @@
 @use "pagination/pagination";
 @use "paragraph/paragraph";
 @use "password-input/password-input";
+@use "progress-list/progress-list";
 @use "radio/radio";
 @use "row/row";
 @use "search-field/search-field";

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

@@ -4,22 +4,18 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  list-style: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
 .ams-link-list {
+  @include reset-ul;
+
   box-sizing: border-box;
   display: grid;
   gap: var(--ams-link-list-gap);
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 }
 
 .ams-link-list__link {

package/src/components/logo/README.md

@@ -11,8 +11,6 @@ The design system provides the correct logo for online use.
 Other logo variations exist, but they cannot be used on our websites.
 The Dutch logo is for websites in the Dutch language and any language other than English.
 The English logo is used for websites in the English language.
-(We will add this logo to the design system later.)
-In the meantime, you can download an image of this logo from [Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/logo-gemeente-amsterdam/#hba498e5c-2388-464f-b769-7622a5d32bd1).
 
 ## Exception
 

package/src/components/menu/menu.scss

@@ -5,14 +5,9 @@
 
 @use "../../common/breakpoint" as *;
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  list-style: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
 .ams-menu {
   background-color: var(--ams-menu-background-color);
   font-family: var(--ams-menu-font-family);
@@ -51,11 +46,12 @@
 }
 
 .ams-menu__list {
+  @include reset-ul;
+
   display: grid;
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 
   @media screen and (min-width: $ams-breakpoint-wide) {
     gap: var(--ams-menu-list-gap);

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

@@ -4,22 +4,18 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ol {
-  list-style-type: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
 .ams-ordered-list {
+  @include reset-ol;
+
   box-sizing: border-box;
   display: grid;
   gap: var(--ams-ordered-list-gap);
 
-  @include text-rendering;
   @include hyphenation;
-  @include reset-ol;
+  @include text-rendering;
 }
 
 .ams-ordered-list:not(.ams-ordered-list--no-markers) {

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

@@ -5,18 +5,16 @@
 
 @use "../../common/breakpoint" as *;
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  list-style: none;
-  margin-block: 0;
-}
-
 .ams-page-footer__spotlight {
   background-color: var(--ams-page-footer-spotlight-background-color);
 }
 
 .ams-page-footer__menu {
+  @include reset-ul;
+
   column-gap: var(--ams-page-footer-menu-column-gap);
   display: flex;
   flex-wrap: wrap;
@@ -24,8 +22,6 @@
   padding-inline: var(--ams-page-footer-menu-padding-inline);
   row-gap: var(--ams-page-footer-menu-row-gap);
 
-  @include reset-ul;
-
   @media screen and (min-width: $ams-breakpoint-medium) {
     padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
   }

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

@@ -19,7 +19,8 @@ Includes the name of the website if it is not the general one.
 - On narrow windows, links can move from the inline menu to the collapsible one.
 - Labels should be short to help the inline menu fit on a single line whenever possible.
 - An icon can be added to the end of a link to make its destination easier to guess.
-- For websites with a brand name that feature the standard Amsterdam logo, only the emblem is shown on narrow screens.
+- For websites with a brand name that feature the standard Amsterdam logo, only the emblem is shown in narrow windows.
+- An abbreviated brand name can be shown in narrow or medium-wide windows if the full name does not fit.
 - If the collapsible menu contains [Headings](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs), give them level 2 and a size of ‘level-3’.
 - There’s no need to add whitespace to the Grid in the collapsible menu.
   Its container already does this.

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

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-page-header {
@@ -64,7 +65,8 @@
   }
 }
 
-.ams-page-header__brand-name {
+.ams-page-header__brand-name,
+.ams-page-header__brand-name-short {
   color: var(--ams-page-header-brand-name-color);
   font-size: var(--ams-page-header-brand-name-font-size);
   font-weight: var(--ams-page-header-brand-name-font-weight);
@@ -78,6 +80,20 @@
   text-wrap: var(--ams-page-header-brand-name-text-wrap);
 }
 
+.ams-page-header__brand-name-short {
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    display: none;
+  }
+
+  & + .ams-page-header__brand-name {
+    display: none;
+
+    @media screen and (min-width: $ams-breakpoint-wide) {
+      display: initial;
+    }
+  }
+}
+
 .ams-page-header__navigation {
   column-gap: var(--ams-page-header-navigation-column-gap);
   display: flex;
@@ -89,13 +105,9 @@
   row-gap: var(--ams-page-header-navigation-row-gap);
 }
 
-@mixin reset-list {
-  list-style: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
 .ams-page-header__menu {
+  @include reset-ul;
+
   align-items: center;
   column-gap: var(--ams-page-header-menu-column-gap);
   display: flex;
@@ -104,8 +116,6 @@
   margin-inline-start: auto;
   pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
   row-gap: var(--ams-page-header-menu-row-gap);
-
-  @include reset-list;
 }
 
 // Do not show menu items below the wide breakpoint...
@@ -121,7 +131,6 @@
 }
 
 @mixin page-header-menu-action {
-  color: var(--ams-page-header-menu-item-color);
   font-size: var(--ams-page-header-menu-item-font-size);
   font-weight: var(--ams-page-header-menu-item-font-weight);
   line-height: var(--ams-page-header-menu-item-line-height);
@@ -138,6 +147,7 @@
 }
 
 .ams-page-header__menu-link {
+  color: var(--ams-page-header-menu-link-color);
   display: inline-flex;
   gap: var(--ams-page-header-menu-link-gap);
   text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
@@ -161,47 +171,29 @@
   }
 }
 
-@mixin reset-button {
-  background: none;
-  border: none;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-  padding-inline: 0;
-
-  // [1] Remove the margin in older Safari.
-}
-
 .ams-page-header__mega-menu-button {
+  @include reset-button;
+
+  background-color: var(--ams-page-header-mega-menu-button-background-color);
+  color: var(--ams-page-header-mega-menu-button-color);
   column-gap: var(--ams-page-header-menu-item-column-gap);
   cursor: var(--ams-page-header-mega-menu-button-cursor);
   display: grid;
   font-family: inherit;
   grid-auto-flow: column;
+  padding-inline: var(--ams-page-header-mega-menu-button-padding-inline);
 
   @include page-header-menu-action;
-  @include reset-button;
-}
 
-.ams-page-header__mega-menu-button[aria-expanded="true"] {
-  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
+  &:hover {
+    background-color: var(--ams-page-header-mega-menu-button-hover-background-color);
+    color: var(--ams-page-header-mega-menu-button-hover-color);
+  }
 }
 
 .ams-page-header__mega-menu-button-label,
 .ams-page-header__mega-menu-button-hidden-label {
-  grid-area: 1 / 1; // To allow the label and the hidden label to overlap
-}
-
-// This hidden label is used to prevent a layout shift when the mega menu is opened
-// and the button text becomes bold.
-.ams-page-header__mega-menu-button-hidden-label {
-  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
-  pointer-events: none;
-  -webkit-user-select: none;
-
-  /* Safari support is added with the prefixed property. */
-  /* stylelint-disable-next-line plugin/use-baseline */
-  user-select: none;
-  visibility: hidden;
+  /* @deprecated These class names will be removed in 6.0.0. */
 }
 
 .ams-page-header__menu-icon-top,

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

@@ -4,14 +4,13 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-h1 {
-  margin-block: 0;
-}
-
 /* @deprecated We no longer use this size of headings. Use `.ams-heading.ams-heading--1` instead. */
 .ams-page-heading {
+  @include reset-hx;
+
   box-sizing: border-box;
   /* stylelint-disable-next-line plugin/use-baseline */
   break-after: avoid;
@@ -26,7 +25,6 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-h1;
 }
 
 .ams-page-heading--inverse {

package/src/components/pagination/pagination.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-pagination {
@@ -15,17 +16,11 @@
   line-height: var(--ams-pagination-line-height);
 }
 
-@mixin reset-ol {
-  list-style-type: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
 .ams-pagination__list {
+  @include reset-ol;
+
   display: flex;
   flex-wrap: wrap;
-
-  @include reset-ol;
 }
 
 .ams-pagination__link {

package/src/components/paragraph/paragraph.scss

@@ -4,13 +4,12 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-p {
-  margin-block: 0;
-}
-
 .ams-paragraph {
+  @include reset-p;
+
   box-sizing: border-box;
   color: var(--ams-paragraph-color);
   font-family: var(--ams-paragraph-font-family);
@@ -18,9 +17,8 @@
   font-weight: var(--ams-paragraph-font-weight);
   line-height: var(--ams-paragraph-line-height);
 
-  @include text-rendering;
   @include hyphenation;
-  @include reset-p;
+  @include text-rendering;
 }
 
 .ams-paragraph--large {

package/src/components/password-input/password-input.scss

@@ -3,16 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-input {
-  -webkit-appearance: none; // Reset appearance for Safari < 15.4
-  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border-radius: 0; // Reset rounded borders on iOS devices
-  margin-block: 0;
-}
-
 .ams-password-input {
+  @include reset-input;
+
   background-color: var(--ams-password-input-background-color);
   border-color: var(--ams-password-input-border-color);
   border-style: var(--ams-password-input-border-style);
@@ -30,21 +26,16 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
 }
 
 .ams-password-input:not([size]) {
   inline-size: 100%;
 }
 
-@mixin reset-placeholder {
-  opacity: 100%; // Reset lower opacity set by Firefox
-}
-
 .ams-password-input::placeholder {
-  color: var(--ams-password-input-placeholder-color);
-
   @include reset-placeholder;
+
+  color: var(--ams-password-input-placeholder-color);
 }
 
 .ams-password-input:disabled {

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

@@ -0,0 +1,14 @@
+<!-- @license CC0-1.0 -->
+
+# Progress List
+
+Displays the progress of a sequence of steps, with optional additional details per step.
+
+## Guidelines
+
+- Choose the correct level for the steps’ headings.
+- Assign a status to each step: _completed_ or _current_.
+  Steps without a status are considered _upcoming_.
+- Maintain a correct chronological order.
+  Only one step may be _current_; preceding steps must be _completed_.
+- Progress List must only be used on a white background.