@amsterdam/design-system-css 3.2.0 → 3.3.0

package/src/components/call-to-action-link/call-to-action-link.scss

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/print-exact" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-call-to-action-link {
@@ -22,6 +23,7 @@
   touch-action: manipulation;
 
   @include hyphenation;
+  @include print-exact;
   @include text-rendering;
 
   &:hover {

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

@@ -20,7 +20,7 @@
   @include text-rendering;
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   .ams-description-list,
   .ams-description-list__section {
     align-items: start;
@@ -50,29 +50,64 @@
 }
 
 .ams-description-list__term {
+  font-size: var(--ams-description-list-term-font-size);
   font-weight: var(--ams-description-list-term-font-weight);
+  line-height: var(--ams-description-list-term-line-height);
   margin-block-end: var(--ams-description-list-term-margin-block-end);
 
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
+  text-wrap: var(--ams-description-list-term-text-wrap);
+
+  @media (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 1;
+
+    // Add margin for Terms that are longer than their Description(s)
+    margin-block-end: var(--ams-description-list-term-vi-medium-margin-block-end);
+
+    // Add half of the difference in computed line heights to align Terms with Descriptions.
+    // - Terms use heading line heights; Descriptions use body text
+    // - Not for Terms that follow a Term, or which are the last child
+    &:not(& + &, :last-child) {
+      padding-block-start: calc(
+        (
+            var(--ams-description-list-font-size) *
+              var(--ams-description-list-line-height) - var(--ams-description-list-term-font-size) *
+              var(--ams-description-list-term-line-height)
+          ) /
+          2
+      );
+    }
+  }
+
   // Remove whitespace between consecutive Terms
   /* stylelint-disable-next-line plugin/use-baseline -- Suboptimal spacing in non-supporting browsers is acceptable */
   &:has(+ .ams-description-list__term) {
     margin-block-end: 0;
   }
+}
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    // Make sure all Terms are in the second column
-    grid-column-start: 1;
+.ams-description-list__description {
+  @include reset-dd;
 
-    // Depend on Descriptions for vertical spacing
-    margin-block-end: 0;
+  font-weight: var(--ams-description-list-description-font-weight);
+  margin-block-end: var(--ams-description-list-description-margin-block-end);
+  padding-inline-start: var(--ams-description-list-description-padding-inline-start);
+
+  @media (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 2;
+    padding-inline-start: 0;
+
+    // Make sure the first Description starts at the top row
+    &:first-of-type {
+      grid-row-start: 1;
+    }
   }
 }
 
 .ams-description-list__section {
   margin-block-end: var(--ams-description-list-section-margin-block-end);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    // Let a Section span both columns of the parent List
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column: span 2;
 
     > :only-of-type {
@@ -82,22 +117,6 @@
   }
 }
 
-.ams-description-list__description {
-  @include reset-dd;
-
-  font-weight: var(--ams-description-list-description-font-weight);
-  margin-block-end: var(--ams-description-list-description-margin-block-end);
-  padding-inline-start: var(--ams-description-list-description-padding-inline-start);
-
-  @media screen and (min-width: $ams-breakpoint-medium) {
-    // Make sure all Descriptions are in the second column
-    grid-column-start: 2;
-
-    // Remove indentation in 2-column layout
-    padding-inline-start: 0;
-  }
-}
-
 // Remove trailing margins
 /* stylelint-disable-next-line no-duplicate-selectors -- Natural reading order, prevents descending specificity */
 .ams-description-list {
@@ -109,3 +128,12 @@
     margin-block-end: 0;
   }
 }
+
+@media (min-width: $ams-breakpoint-medium) {
+  .ams-description-list,
+  .ams-description-list > .ams-description-list__section:last-child {
+    > .ams-description-list__term:last-of-type {
+      margin-block-end: 0;
+    }
+  }
+}

package/src/components/dialog/dialog.scss

@@ -25,7 +25,7 @@ so do not apply these styles without an `open` attribute. */
   max-block-size: var(--ams-dialog-max-block-size);
   max-inline-size: var(--ams-dialog-max-inline-size);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     inline-size: var(--ams-dialog-medium-inline-size);
     max-block-size: var(--ams-dialog-medium-max-block-size);
   }
@@ -47,7 +47,7 @@ so do not apply these styles without an `open` attribute. */
   padding-block: var(--ams-dialog-header-padding-block);
   padding-inline: var(--ams-dialog-header-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     padding-block: var(--ams-dialog-header-medium-padding-block);
     padding-inline: var(--ams-dialog-header-medium-padding-inline);
   }
@@ -59,7 +59,7 @@ so do not apply these styles without an `open` attribute. */
   padding-block: var(--ams-dialog-body-padding-block);
   padding-inline: var(--ams-dialog-body-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     padding-inline: var(--ams-dialog-body-medium-padding-inline);
   }
 }
@@ -68,7 +68,7 @@ so do not apply these styles without an `open` attribute. */
   padding-block: var(--ams-dialog-footer-padding-block);
   padding-inline: var(--ams-dialog-footer-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     padding-block: var(--ams-dialog-footer-medium-padding-block);
     padding-inline: var(--ams-dialog-footer-medium-padding-inline);
   }

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

@@ -53,11 +53,7 @@
   font-weight: var(--ams-field-set-legend-font-weight);
   line-height: var(--ams-field-set-legend-line-height);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-field-set-legend-text-wrap);
 
   @include hyphenation;

package/src/components/gap/README.md

@@ -14,11 +14,10 @@ Five options are available for the width or height of the gap:
 - `ams-gap-l`
 - `ams-gap-xl`
 
+These classes apply the [design tokens for space](/docs/brand-design-tokens-space--docs).
+
 Because spacing is responsive, the gaps are as well.
 They are also smaller in [Compact Mode](https://designsystem.amsterdam/docs/docs-developer-guide-modes--docs).
-Consult the [Space](/docs/brand-design-tokens-space--docs) docs for an indication of their sizes.
-
-The `2xl` space is intended for whitespace around a [Grid](/docs/components-layout-grid--docs) only, which can be produced through a `padding*` of `large`.
 
 ## Guidelines
 

package/src/components/grid/_mixins.scss

@@ -14,12 +14,12 @@
   padding-inline: var(--ams-grid-padding-inline);
   row-gap: var(--ams-grid-row-gap-xl);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
     padding-inline: var(--ams-grid-medium-padding-inline);
   }
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
     padding-inline: var(--ams-grid-wide-padding-inline);
   }
@@ -92,25 +92,25 @@
 }
 
 @mixin ams-grid__cell--span-medium($i) {
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column-end: span $i;
   }
 }
 
 @mixin ams-grid__cell--start-medium($i) {
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     grid-column-start: $i;
   }
 }
 
 @mixin ams-grid__cell--span-wide($i) {
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     grid-column-end: span $i;
   }
 }
 
 @mixin ams-grid__cell--start-wide($i) {
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     grid-column-start: $i;
   }
 }

package/src/components/grid/grid.scss

@@ -81,7 +81,7 @@ $ams-grid-column-count: 12;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-medium) {
+@media (min-width: $ams-breakpoint-medium) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-grid__cell--span-#{$i}-medium {
       @include ams-grid__cell--span-medium($i);
@@ -93,7 +93,7 @@ $ams-grid-column-count: 12;
   }
 }
 
-@media screen and (min-width: $ams-breakpoint-wide) {
+@media (min-width: $ams-breakpoint-wide) {
   @for $i from 1 through $ams-grid-column-count {
     .ams-grid__cell--span-#{$i}-wide {
       @include ams-grid__cell--span-wide($i);

package/src/components/heading/heading.scss

@@ -23,11 +23,7 @@
   font-family: var(--ams-heading-font-family);
   font-weight: var(--ams-heading-font-weight);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-heading-text-wrap);
 
   @include hyphenation;

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

@@ -46,7 +46,7 @@
     display: none;
   }
 
-  @media not (prefers-reduced-motion) {
+  @media (prefers-reduced-motion: no-preference) {
     scroll-behavior: smooth;
   }
 }

package/src/components/label/label.scss

@@ -14,11 +14,7 @@
   font-weight: var(--ams-label-font-weight);
   line-height: var(--ams-label-line-height);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-label-text-wrap);
 
   @include hyphenation;

package/src/components/logo/README.md

@@ -14,12 +14,13 @@ The English logo is used for websites in the English language.
 
 ## Exception
 
-Use a sub-brand logo if the website is owned by one of the 5 sub-brands.
+Websites operated by one of the sub-brands use their specific logo.
 They have a separate status because of their unique service provision not directly associated with the City.
 
 The sub-brands are:
 
 - GGD Amsterdam
+- GGD Amsterdam Inspectie
 - Museum Weesp
 - Stadsarchief
 - Stadsbank van Lening

package/src/components/margin/README.md

@@ -15,9 +15,10 @@ Six options are available for the width or height of the bottom margin:
 - `ams-mb-xl`
 - `ams-mb-2xl`
 
+These classes apply the [design tokens for space](/docs/brand-design-tokens-space--docs).
+
 Because spacing is responsive, the margins are as well.
 They are also smaller in [Compact Mode](https://designsystem.amsterdam/docs/docs-developer-guide-modes--docs).
-Consult the [Space](/docs/brand-design-tokens-space--docs) docs for an indication of their sizes.
 
 ## Guidelines
 

package/src/components/menu/menu.scss

@@ -23,12 +23,12 @@
   // We subtract the menu link padding to align the items with surrounding content.
   padding-inline: calc(var(--ams-grid-padding-inline) - var(--ams-menu-link-padding-inline));
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     margin-inline: calc(var(--ams-grid-medium-padding-inline) * -1);
     padding-inline: var(--ams-grid-medium-padding-inline);
   }
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     display: none;
     margin-inline: 0; // Override negative margin above.
     max-inline-size: var(--ams-menu-wide-max-inline-size);
@@ -40,7 +40,7 @@
 .ams-menu--in-wide-window {
   display: none;
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     display: block;
   }
 }
@@ -53,7 +53,7 @@
   @include hyphenation;
   @include text-rendering;
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     gap: var(--ams-menu-list-gap);
   }
 }
@@ -79,7 +79,7 @@
     align-self: initial;
   }
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     align-items: center;
     display: flex; // The links do stretch in the vertical layout of Menu.
     flex-direction: column;

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

@@ -5,11 +5,14 @@
 
 @use "../../common/breakpoint" as *;
 @use "../../common/hyphenation" as *;
+@use "../../common/print-exact" as *;
 @use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-page-footer__spotlight {
   background-color: var(--ams-page-footer-spotlight-background-color);
+
+  @include print-exact;
 }
 
 .ams-page-footer__menu {
@@ -22,11 +25,11 @@
   padding-inline: var(--ams-page-footer-menu-padding-inline);
   row-gap: var(--ams-page-footer-menu-row-gap);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
   }
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
   }
 }

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

@@ -2,30 +2,14 @@
 
 # Page Header
 
-Displays the City’s logo at the top of every page, and optionally a navigation menu.
-Includes the name of the website if it is not the general one.
+Conveys the origin and authority of the website through a logo and an optional name.
+Can serve as a consistent starting point for navigation.
 
 ## Guidelines
 
-- The Page Header must be used on all websites for the City of Amsterdam.
-- It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages.
-- The Page Header is important because it conveys our corporate identity and is the first thing people see.
-  Using it consistently helps users recognize and trust the website.
-- The Page Header is the same on every page of the website, although full-screen pages may hide it, e.g. a video or a map.
-- The inline menu can contain a maximum of 5 items.
-  The last two will often be ‘Search’ and ‘Menu’.
-- An icon can be added to such a menu item if it helps clarify it, e.g. for searching and for logging in and out.
-- The 'Menu' button opens a collapsible menu, which has room for more links.
-- 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 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.
-
-## References
-
-- A Page Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
-- [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent.
+- All our websites must start with the Page Header.
+  Consistent use helps people identify, navigate, and trust our digital channels.
+- The Page Header must show the appropriate logo and brand name.
+  The navigation structure can be configured freely.
+- The Page Header is the same on every page of the website, although full-screen pages (e.g. a video or map) may hide it.
+- Continue below to the [guidelines for elements](#guidelines-for-elements).

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

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
+@use "../../common/print-exact" as *;
 @use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
@@ -18,11 +19,11 @@
   padding-block: var(--ams-page-header-padding-block);
   padding-inline: var(--ams-page-header-padding-inline);
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     padding-inline: var(--ams-page-header-medium-padding-inline);
   }
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     padding-inline: var(--ams-page-header-wide-padding-inline);
   }
 }
@@ -60,7 +61,7 @@
   inline-size: 0.75rem;
   overflow: hidden;
 
-  @media screen and (min-width: $ams-breakpoint-medium) {
+  @media (min-width: $ams-breakpoint-medium) {
     inline-size: auto;
   }
 }
@@ -72,23 +73,19 @@
   font-weight: var(--ams-page-header-brand-name-font-weight);
   line-height: var(--ams-page-header-brand-name-line-height);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-page-header-brand-name-text-wrap);
 }
 
 .ams-page-header__brand-name-short {
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     display: none;
   }
 
   & + .ams-page-header__brand-name {
     display: none;
 
-    @media screen and (min-width: $ams-breakpoint-wide) {
+    @media (min-width: $ams-breakpoint-wide) {
       display: initial;
     }
   }
@@ -120,7 +117,7 @@
 
 // Do not show menu items below the wide breakpoint...
 .ams-page-header__menu-item {
-  @media screen and (not (min-width: $ams-breakpoint-wide)) {
+  @media (not (min-width: $ams-breakpoint-wide)) {
     display: none;
   }
 }
@@ -166,7 +163,7 @@
 }
 
 .ams-page-header__mega-menu-button-item--hide-on-wide-window {
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     display: none;
   }
 }
@@ -184,6 +181,7 @@
   padding-inline: var(--ams-page-header-mega-menu-button-padding-inline);
 
   @include page-header-menu-action;
+  @include print-exact;
 
   &:hover {
     background-color: var(--ams-page-header-mega-menu-button-hover-background-color);
@@ -245,7 +243,7 @@
 .ams-page-header__grid-cell-narrow-window-only {
   display: initial; // Override the `hidden` attribute; this cell duplicates the non-fixed links in the Page Header Menu.
 
-  @media screen and (min-width: $ams-breakpoint-wide) {
+  @media (min-width: $ams-breakpoint-wide) {
     display: none;
   }
 }

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

@@ -20,7 +20,8 @@
   font-size: var(--ams-page-heading-font-size);
   font-weight: var(--ams-page-heading-font-weight);
   line-height: var(--ams-page-heading-line-height);
-  /* stylelint-disable-next-line plugin/use-baseline */
+
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-page-heading-text-wrap);
 
   @include hyphenation;

package/src/components/pagination/pagination.scss

@@ -48,6 +48,10 @@
   }
 }
 
+.ams-pagination__link-label {
+  display: inline; // Override the default 'hidden' attribute, showing the visible label when CSS loads
+}
+
 .ams-pagination__link[aria-current="page"] {
   font-weight: var(--ams-pagination-link-current-font-weight);
 

package/src/components/paragraph/paragraph.scss

@@ -25,11 +25,7 @@
   font-size: var(--ams-paragraph-large-font-size);
   line-height: var(--ams-paragraph-large-line-height);
 
-  /*
-   * If text-wrap is not supported, it is ignored.
-   * This means the wrapped text will look less balanced, which is fine.
-   */
-  /* stylelint-disable-next-line plugin/use-baseline */
+  /* stylelint-disable-next-line plugin/use-baseline -- Unbalanced line lengths in non-supporting browsers are acceptable */
   text-wrap: var(--ams-paragraph-large-text-wrap);
 }