@amsterdam/design-system-css 3.1.0 → 3.2.1

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,13 +4,14 @@
  */
 
 @use "../../common/breakpoint" as *;
+@use "../../common/resets" as *;
 
 .ams-image-slider {
   display: grid;
   gap: var(--ams-image-slider-gap);
 }
 
-.ams-image-slider__item {
+.ams-image-slider__slide {
   scroll-snap-align: center;
   scroll-snap-stop: always;
 }
@@ -72,13 +73,9 @@
   grid-template-columns: repeat(5, 1fr);
 }
 
-@mixin reset-button {
-  border: none;
-  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;
@@ -87,8 +84,6 @@
   opacity: var(--ams-image-slider-thumbnails-thumbnail-opacity);
   outline-offset: var(--ams-button-outline-offset);
 
-  @include reset-button;
-
   &:hover {
     opacity: var(--ams-image-slider-thumbnails-thumbnail-hover-opacity);
   }
@@ -97,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/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/progress-list.scss

@@ -4,12 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
-
-@mixin reset-ol {
-  list-style: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
+@use "../../common/resets" as *;
 
 @mixin indicator {
   display: grid;
@@ -75,8 +70,6 @@
 /* Shape: visual circle in marker */
 
 .ams-progress-list__marker-shape {
-  @include marker-shape;
-
   background-color: var(--ams-progress-list-step-marker-shape-background-color);
   block-size: var(--ams-progress-list-step-marker-shape-block-size);
   border: var(--ams-progress-list-step-marker-shape-border-width)
@@ -86,6 +79,8 @@
   outline: var(--ams-progress-list-step-marker-shape-outline-width)
     var(--ams-progress-list-step-marker-shape-outline-style) var(--ams-progress-list-step-marker-shape-outline-color);
 
+  @include marker-shape;
+
   .ams-progress-list__step--completed & {
     background-color: var(--ams-progress-list-step-completed-marker-shape-background-color);
     border-color: var(--ams-progress-list-step-completed-marker-shape-border-color);
@@ -100,12 +95,12 @@
 /* Connector */
 
 .ams-progress-list__connector {
-  @include connector;
-
   border-inline: var(--ams-progress-list-step-connector-border-inline-width)
     var(--ams-progress-list-step-connector-border-inline-style)
     var(--ams-progress-list-step-connector-border-inline-color);
 
+  @include connector;
+
   .ams-progress-list--heading-2 & {
     margin-block-start: var(--ams-progress-list-heading-2-step-marker-margin-block-start);
   }
@@ -168,13 +163,13 @@
 }
 
 .ams-progress-list-substeps__indicator {
-  @include indicator;
-
   margin-inline-end: var(--ams-progress-list-substeps-step-indicator-margin-inline-end);
   margin-inline-start: calc(
     -1 * var(--ams-progress-list-step-gap) - var(--ams-progress-list-step-marker-shape-block-size)
   );
 
+  @include indicator;
+
   @media screen and (min-width: $ams-breakpoint-medium) {
     margin-inline-end: var(--ams-progress-list-substeps-step-indicator-medium-margin-inline-end);
     margin-inline-start: calc(
@@ -192,8 +187,6 @@
 }
 
 .ams-progress-list-substeps__marker-shape {
-  @include marker-shape;
-
   background-color: var(--ams-progress-list-substeps-step-marker-shape-background-color);
   block-size: var(--ams-progress-list-substeps-step-marker-shape-block-size);
   border: var(--ams-progress-list-substeps-step-marker-shape-border-width)
@@ -205,6 +198,8 @@
     var(--ams-progress-list-substeps-step-marker-shape-outline-style)
     var(--ams-progress-list-substeps-step-marker-shape-outline-color);
 
+  @include marker-shape;
+
   .ams-progress-list-substeps__step--completed & {
     background-color: var(--ams-progress-list-substeps-step-completed-marker-shape-background-color);
     border-color: var(--ams-progress-list-substeps-step-completed-marker-shape-border-color);
@@ -217,8 +212,6 @@
 }
 
 .ams-progress-list-substeps__connector {
-  @include connector;
-
   /* Cover underlying connector of parent step to prevent it from shining through. Our value for this token is white. */
   background-color: var(--ams-progress-list-substeps-step-connector-background-color);
   border: var(--ams-progress-list-substeps-step-connector-border-inline-width)
@@ -226,6 +219,8 @@
     var(--ams-progress-list-substeps-step-connector-border-inline-color);
   margin-block-start: var(--ams-progress-list-substeps-step-connector-margin-block-start);
 
+  @include connector;
+
   .ams-progress-list-substeps__step--completed & {
     border-inline-color: var(--ams-progress-list-substeps-step-completed-connector-border-inline-color);
     border-inline-style: var(--ams-progress-list-substeps-step-completed-connector-border-inline-style);

package/src/components/search-field/search-field.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-search-field {
@@ -10,14 +11,9 @@
   isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
 }
 
-@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-search-field__input {
+  @include reset-input;
+
   background-color: var(--ams-search-field-input-background-color);
   border-color: var(--ams-search-field-input-border-color);
   border-style: var(--ams-search-field-input-border-style);
@@ -35,18 +31,15 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
 
   &:focus {
     z-index: 1; // Make sure the focus outline isn’t cut off by the adjacent button
   }
 }
 
-@mixin reset-placeholder {
-  opacity: 100%; // Reset lower opacity set by Firefox
-}
-
 .ams-search-field__input::placeholder {
+  @include reset-placeholder;
+
   color: var(--ams-search-field-input-placeholder-color);
 }
 

package/src/components/select/select.scss

@@ -3,12 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset-select {
-  appearance: none; // Reset native appearance to hide default chevron
-  border-radius: 0; // Reset rounded borders for Safari on MacOS
-}
+@use "../../common/resets" as *;
 
 .ams-select {
+  @include reset-select;
+
   background-color: var(--ams-select-background-color);
   border-color: var(--ams-select-border-color);
   border-style: var(--ams-select-border-style);
@@ -24,8 +23,6 @@
   padding-inline: var(--ams-select-padding-inline);
   touch-action: manipulation;
 
-  @include reset-select;
-
   &:not([multiple]) {
     background-image: var(--ams-select-background-image);
     background-position: var(--ams-select-background-position);

package/src/components/spotlight/README.md

@@ -6,12 +6,16 @@ Emphasizes a section on a page through a distinctive background colour.
 
 ## Guidelines
 
-- Display the Spotlight at the entire width of the [Page](/docs/components-containers-page--docs) container; do not position it on the [Grid](/docs/components-layout-grid--docs).
-- Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element.
+- Use the entire width of the [Page](/docs/components-containers-page--docs) container.
+  Do not position a Spotlight on the [Grid](/docs/components-layout-grid--docs).
+  Wrap its content in a Grid with extra large vertical padding.
 - Use any of the [highlight colours](/docs/brand-design-tokens-colour--docs) for the background.
   The design system does not prescribe a meaning to any of these colours.
   The default is purple.
-- Select [the correct colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) for text and links against the background you choose.
+  Select [the correct colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) for text and links against the background you choose.
+- Find a fitting setup for the [amount and width of columns](/docs/pages-public-introduction--docs#how-to-size-the-grid-cells).
+- By default, a Spotlight renders a `<div>` element in HTML.
+  Use the `as` prop to make your markup more semantic.
 
 ## Relevant WCAG requirements