@amsterdam/design-system-css 1.0.0 → 2.0.0

package/src/components/menu/menu.scss

@@ -0,0 +1,82 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+.ams-menu {
+  font-family: var(--ams-menu-font-family);
+  font-size: var(--ams-menu-font-size);
+  font-weight: var(--ams-menu-font-weight);
+  line-height: var(--ams-menu-line-height);
+}
+
+.ams-menu__list {
+  display: grid;
+
+  @include hyphenation;
+  @include text-rendering;
+  @include reset-ul;
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    gap: var(--ams-menu-list-gap);
+  }
+}
+
+.ams-menu__link {
+  align-items: flex-start;
+  color: var(--ams-menu-link-color);
+  display: flex;
+  gap: var(--ams-menu-link-gap);
+  outline-offset: var(--ams-menu-link-outline-offset);
+  padding-block: var(--ams-menu-link-padding-block);
+  padding-inline: var(--ams-menu-link-padding-inline);
+  text-decoration-line: var(--ams-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-menu-link-text-underline-offset);
+
+  &:hover {
+    color: var(--ams-menu-link-hover-color);
+    text-decoration-line: var(--ams-menu-link-hover-text-decoration-line);
+  }
+
+  .ams-menu__icon {
+    align-self: initial;
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    align-items: center;
+    flex-direction: column;
+    gap: 0;
+
+    .ams-menu__icon {
+      --ams-icon-font-size: var(--ams-icon-heading-3-font-size);
+      --ams-icon-line-height: var(--ams-icon-heading-3-line-height);
+    }
+  }
+}
+
+.ams-menu__link--contrast {
+  color: var(--ams-menu-link-contrast-color);
+
+  &:hover {
+    color: var(--ams-menu-link-contrast-hover-color);
+  }
+}
+
+.ams-menu__link--inverse {
+  color: var(--ams-menu-link-inverse-color);
+
+  &:hover {
+    color: var(--ams-menu-link-inverse-hover-color);
+  }
+}

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

@@ -45,14 +45,19 @@
   line-height: var(--ams-ordered-list-small-line-height);
 }
 
-:is(.ams-ordered-list, .ams-unordered-list) .ams-ordered-list {
-  gap: var(--ams-ordered-list-ordered-list-gap);
-  list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);
-  padding-block-end: var(--ams-ordered-list-ordered-list-padding-block-end);
-  padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start);
+:is(.ams-ordered-list, .ams-unordered-list) {
+  .ams-ordered-list {
+    gap: var(--ams-ordered-list-ordered-list-gap);
+    list-style-type: var(--ams-ordered-list-ordered-list-list-style-type);
+    padding-block-start: var(--ams-ordered-list-ordered-list-padding-block-start);
+
+    .ams-ordered-list__item {
+      margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start);
+      padding-inline-start: var(--ams-ordered-list-ordered-list-item-padding-inline-start);
+    }
+  }
 
-  .ams-ordered-list__item {
-    margin-inline-start: var(--ams-ordered-list-ordered-list-item-margin-inline-start);
-    padding-inline-start: var(--ams-ordered-list-ordered-list-item-padding-inline-start);
+  > :not(:last-child) > .ams-ordered-list {
+    padding-block-end: var(--ams-ordered-list-ordered-list-padding-block-end);
   }
 }

package/src/components/page/README.md

@@ -19,5 +19,5 @@ Sets the background colour and its maximum width, and is horizontally centered.
 
 ## Design
 
-The Page container sets the maximum width for a website of the City of Amsterdam, which is 1600 pixels.
+The Page container sets the maximum width for a website of the City of Amsterdam, which is 1440 pixels.
 It horizontally centres both itself and its content and sets a white background.

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

@@ -7,19 +7,20 @@ Provides service information at the bottom of every page.
 ## Guidelines
 
 - The Page Footer must be used on all websites and applications for the City of Amsterdam.
+- It must be the same on every page.
 - It usually consists of two sections: a full-width blue `PageFooter.Spotlight` and a `PageFooter.Menu` below it.
-- `Footer.Menu` is preceded by a visually hidden `Heading` for accessibility.
 - A Page Footer containing only a `PageFooter.Menu` can be sufficient for applications.
-- The Page Footer must be used on all websites for the City of Amsterdam.
-- It must be the same on every page.
-- Set [the inverse colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) on all text and links in this area.
+- Set [the inverse colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) on all text and links in the Spotlight area.
+- If the Page Footer contains [Headings](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs), give them level 2 and a size of ‘level-3’.
+  A visually hidden heading to group them is not necessary – the footer’s landmark provides enough guidance.
+
+## Content
 
 The top section offers space for various practical links:
 
-- The first column focuses on contact information.
-  The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
-- The second column contains links to relevant (online) sites or sources.
-- The third column refers to newsletters, social media, etc.
+1. The first column focuses on contact information.
+   The information is as specific as possible and tailored to the respective website or page (e.g., including a chat option if available).
+1. The second column contains links to relevant (online) sites or sources.
+1. The third column refers to newsletters, events, social media, etc.
 
-The menu in the bottom section is for links to privacy policies, cookie statements, information about the website itself, etc.
-Contact details should not go here.
+The menu is for links to privacy policies, cookie statements, and other information about the website itself.

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

@@ -19,6 +19,7 @@ Includes the name of the application if it is not the general website.
 - 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.
+- 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’.
 
 ## References
 

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

@@ -1,19 +1,3 @@
 <!-- @license CC0-1.0 -->
 
 # Page Heading
-
-The page heading component is a prominent text at the beginning of a page, immediately after the Page Header.
-Use this component for a name, title, or motto.
-
-## Guidelines
-
-- Use this component to capture the user’s attention.
-- Only use this component once per page, typically only on the homepage.
-- Avoid using it if you need to display long pieces of text; the text should be short and precise.
-
-## Relevant WCAG requirements
-
-The page heading component is a variant of a heading level 1 with a distinct style.
-When using this component, ensure that the heading hierarchy of the page remains logical.
-
-For this component, the same WCAG requirements apply as for [the heading component](/docs/components-text-heading--docs).

package/src/components/page-heading/{page-heading.scss → page-heading.deprecated.scss}

@@ -10,6 +10,7 @@
   margin-block: 0;
 }
 
+/* @deprecated We no longer use this size of headings. Use `.ams-heading.ams-heading--1` instead. */
 .ams-page-heading {
   box-sizing: border-box;
   break-after: avoid;

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

@@ -37,9 +37,14 @@
   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);
-  opacity: 100%; // This resets the lower opacity set by Firefox
+
+  @include reset-placeholder;
 }
 
 .ams-password-input:disabled {
@@ -47,16 +52,17 @@
   cursor: var(--ams-password-input-disabled-cursor);
 }
 
-.ams-password-input:invalid,
-.ams-password-input[aria-invalid="true"] {
+.ams-password-input:not(:disabled):invalid,
+.ams-password-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-password-input-invalid-border-color);
-
-  &:hover {
-    border-color: var(--ams-password-input-invalid-hover-border-color);
-    box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
-  }
 }
 
 .ams-password-input:not(:disabled):hover {
   box-shadow: var(--ams-password-input-hover-box-shadow);
 }
+
+.ams-password-input:not(:disabled):invalid:hover,
+.ams-password-input:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-password-input-invalid-hover-border-color);
+  box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
+}

package/src/components/radio/README.md

@@ -14,5 +14,7 @@ Allows users to select one option from a list.
   However you should do this with extreme caution as it can reinforce bias.
   If in doubt, order alphabetically.
 - Labels should be concise. Try to keep labels shorter than 4 words.
-
-Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list.
+- Do not check a radio button initially.
+  This prevents users from leaving the question unanswered.
+  It also increases the chance of submitting a wrong answer.
+- Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list.

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

@@ -37,28 +37,32 @@
   @include text-rendering;
   @include reset-input;
 
-  &:hover {
-    box-shadow: var(--ams-search-field-input-hover-box-shadow);
-  }
-
   &:focus {
     z-index: 1; // Make sure the focus outline isn’t cut off by the adjacent button
   }
 }
 
-.ams-search-field__input:invalid,
-.ams-search-field__input[aria-invalid="true"] {
-  border-color: var(--ams-search-field-input-invalid-border-color);
-
-  &:hover {
-    border-color: var(--ams-search-field-input-invalid-hover-border-color);
-    box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
-  }
+@mixin reset-placeholder {
+  opacity: 100%; // Reset lower opacity set by Firefox
 }
 
 .ams-search-field__input::placeholder {
   color: var(--ams-search-field-input-placeholder-color);
-  opacity: 100%; // This resets the lower opacity set by Firefox
+}
+
+.ams-search-field__input:not(:disabled):invalid,
+.ams-search-field__input:not(:disabled)[aria-invalid="true"] {
+  border-color: var(--ams-search-field-input-invalid-border-color);
+}
+
+.ams-search-field__input:not(:disabled):hover {
+  box-shadow: var(--ams-search-field-input-hover-box-shadow);
+}
+
+.ams-search-field__input:not(:disabled):invalid:hover,
+.ams-search-field__input:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-search-field-input-invalid-hover-border-color);
+  box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
 }
 
 .ams-search-field__input::-webkit-search-cancel-button {

package/src/components/select/select.scss

@@ -17,8 +17,8 @@
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
   font-weight: var(--ams-select-font-weight);
-  inline-size: 100%;
   line-height: var(--ams-select-line-height);
+  max-inline-size: 100%;
   outline-offset: var(--ams-select-outline-offset);
   padding-block: var(--ams-select-padding-block);
   padding-inline: var(--ams-select-padding-inline);
@@ -34,33 +34,32 @@
   }
 }
 
-.ams-select:invalid,
-.ams-select[aria-invalid="true"] {
-  border-color: var(--ams-select-invalid-border-color);
-}
-
 .ams-select:disabled {
   color: var(--ams-select-disabled-color);
   cursor: var(--ams-select-disabled-cursor);
 
   &:not([multiple]) {
     background-image: var(--ams-select-disabled-background-image);
-
-    /* stylelint-disable no-descending-specificity */
-    &:hover {
-      background-image: var(--ams-select-hover-background-image);
-    }
   }
 }
 
-.ams-select:invalid:hover,
-.ams-select[aria-invalid="true"]:hover {
-  border-color: var(--ams-select-invalid-hover-border-color);
-  box-shadow: var(--ams-select-invalid-hover-box-shadow);
+.ams-select:not(:disabled):invalid,
+.ams-select:not(:disabled)[aria-invalid="true"] {
+  border-color: var(--ams-select-invalid-border-color);
 }
 
 .ams-select:not(:disabled):hover {
   box-shadow: var(--ams-select-hover-box-shadow);
+
+  &:not([multiple]) {
+    background-image: var(--ams-select-hover-background-image);
+  }
+}
+
+.ams-select:not(:disabled):invalid:hover,
+.ams-select:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-select-invalid-hover-border-color);
+  box-shadow: var(--ams-select-invalid-hover-box-shadow);
 }
 
 .ams-select__option:disabled {

package/src/components/skip-link/README.md

@@ -13,9 +13,10 @@ After appearing, it pushes the rest of the page down.
 ## Guidelines
 
 - Place the Skip Link as the first element in the [Page](/docs/components-containers-page--docs) container.
-- Target the Skip Link to the main content.
-  On an article page, for example, it could be the title of the article.
-  On a search page, it could be the search field.
-- Set `id="example-id"` on the container of that element and then use `href="#example-id"` on the Skip Link.
+- Direct the Skip Link to the main content area on the Page.
+  Typically, this is the `main` HTML element.
+  Repeated navigation blocks such as Breadcrumbs and back Links do not belong to the main content area.
+- Set `id="inhoud"` on the `main` HTML element and then use `href="#inhoud"` on the Skip Link.
 - Complex pages with multiple sections may benefit from more than one Skip Link.
+  If you need multiple words to describe a Skip Link target, use kebab case (`id="op-deze-manier"`).
 - Skip Links are unnecessary on a simple page with only text and minimal navigation.

package/src/components/standalone-link/README.md

@@ -2,10 +2,14 @@
 
 # Standalone Link
 
-A navigation element that is seperated from the text around it.
+A navigation element that is separated from the text around it.
+
+The Standalone Link has a chevron icon at the start to signify that it is a link.
+This also makes it visually identical to a single link in a [Link List](/docs/components-navigation-link--docs).
+As a result, pages can have sections with either one or several links used interchangeably; they look alike, and their semantics are correct.
 
 ## Guidelines
 
-- Use a Standalone Link for links that need to stand out.
-- Use a regular [Link](/docs/components-navigation-link--docs) within sentences or paragraphs of text.
+- Use a Standalone Link for a single link on its own line of text.
+- Within running body text, use a regular Link instead.
 - For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

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

@@ -15,6 +15,7 @@
   font-weight: var(--ams-standalone-link-font-weight);
   line-height: var(--ams-standalone-link-line-height);
   outline-offset: var(--ams-standalone-link-outline-offset);
+  text-decoration-line: var(--ams-standalone-link-text-decoration-line);
   text-decoration-thickness: var(--ams-standalone-link-text-decoration-thickness);
   text-underline-offset: var(--ams-standalone-link-text-underline-offset);
 
@@ -23,8 +24,7 @@
 
   &:hover {
     color: var(--ams-standalone-link-hover-color);
-    text-decoration-thickness: var(--ams-standalone-link-hover-text-decoration-thickness);
-    text-underline-offset: var(--ams-standalone-link-hover-text-underline-offset);
+    text-decoration-line: var(--ams-standalone-link-hover-text-decoration-line);
   }
 }
 
@@ -44,10 +44,7 @@
   }
 }
 
+/* stylelint-disable-next-line block-no-empty */
 .ams-standalone-link--with-icon {
-  text-decoration-line: var(--ams-standalone-link-with-icon-text-decoration-line);
-
-  &:hover {
-    text-decoration-line: var(--ams-standalone-link-with-icon-hover-text-decoration-line);
-  }
+  /* This class name is deprecated. */
 }

package/src/components/switch/switch.scss

@@ -25,6 +25,7 @@
   inline-size: var(--ams-switch-inline-size);
   outline-offset: var(--ams-switch-outline-offset);
   transition: background-color 0.2s ease-in-out;
+  vertical-align: middle;
 }
 
 .ams-switch__label::before {

package/src/components/table/README.md

@@ -7,7 +7,6 @@ Table is used to display simple information that does not need to be filtered or
 
 ## Guidelines
 
-- Use `<Table.Caption>` to describe a table in the same way you would use a heading.
-  A caption helps users find, navigate and understand tables.
-- Never use the table component to layout content on a page.
-  Instead, use [Grid](/docs/components-layout-grid--docs).
+- Add a caption to help users find, navigate and understand the table.
+- Include a [Heading](https://designsystem.amsterdam/?path=/docs/components-text-heading--docs) in the Table Caption,
+  unless the table is in a [Figure](http://designsystem.amsterdam/?path=/docs/components-media-figure--docs) which has a Figure Caption.

package/src/components/text-area/text-area.scss

@@ -35,9 +35,14 @@
   @include reset-textarea;
 }
 
+@mixin reset-placeholder {
+  opacity: 100%; // Reset lower opacity set by Firefox
+}
+
 .ams-text-area::placeholder {
   color: var(--ams-text-area-placeholder-color);
-  opacity: 100%; // This resets the lower opacity set by Firefox
+
+  @include reset-placeholder;
 }
 
 .ams-text-area:disabled {
@@ -45,20 +50,21 @@
   cursor: var(--ams-text-area-disabled-cursor);
 }
 
-.ams-text-area:invalid,
-.ams-text-area[aria-invalid="true"] {
+.ams-text-area:not(:disabled):invalid,
+.ams-text-area:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-text-area-invalid-border-color);
-
-  &:hover {
-    border-color: var(--ams-text-area-invalid-hover-border-color);
-    box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
-  }
 }
 
 .ams-text-area:not(:disabled):hover {
   box-shadow: var(--ams-text-area-hover-box-shadow);
 }
 
+.ams-text-area:not(:disabled):invalid:hover,
+.ams-text-area:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-text-area-invalid-hover-border-color);
+  box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
+}
+
 .ams-text-area--resize-none {
   resize: none;
 }

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

@@ -37,9 +37,14 @@
   inline-size: 100%;
 }
 
+@mixin reset-placeholder {
+  opacity: 100%; // Reset lower opacity set by Firefox
+}
+
 .ams-text-input::placeholder {
   color: var(--ams-text-input-placeholder-color);
-  opacity: 100%; // This resets the lower opacity set by Firefox
+
+  @include reset-placeholder;
 }
 
 .ams-text-input:disabled {
@@ -47,16 +52,17 @@
   cursor: var(--ams-text-input-disabled-cursor);
 }
 
-.ams-text-input:invalid,
-.ams-text-input[aria-invalid="true"] {
+.ams-text-input:not(:disabled):invalid,
+.ams-text-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-text-input-invalid-border-color);
-
-  &:hover {
-    border-color: var(--ams-text-input-invalid-hover-border-color);
-    box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
-  }
 }
 
 .ams-text-input:not(:disabled):hover {
   box-shadow: var(--ams-text-input-hover-box-shadow);
 }
+
+.ams-text-input:not(:disabled):invalid:hover,
+.ams-text-input:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-text-input-invalid-hover-border-color);
+  box-shadow: var(--ams-text-input-invalid-hover-box-shadow);
+}

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

@@ -11,6 +11,16 @@
   border-radius: 0; // Reset rounded borders on iOS devices
   inline-size: auto; // Reset inline size of 10em set by Android devices
   margin-block: 0;
+
+  &::-webkit-datetime-edit,
+  &::-webkit-datetime-edit-ampm-field,
+  &::-webkit-datetime-edit-fields-wrapper,
+  &::-webkit-datetime-edit-hour-field,
+  &::-webkit-datetime-edit-millisecond-field,
+  &::-webkit-datetime-edit-minute-field,
+  &::-webkit-datetime-edit-second-field {
+    padding-block: 0; // Override value of 1px in UA stylesheet
+  }
 }
 
 .ams-time-input {
@@ -62,16 +72,17 @@
   visibility: visible;
 }
 
-.ams-time-input:invalid,
-.ams-time-input[aria-invalid="true"] {
+.ams-time-input:not(:disabled):invalid,
+.ams-time-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-time-input-invalid-border-color);
-
-  &:hover {
-    border-color: var(--ams-time-input-invalid-hover-border-color);
-    box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
-  }
 }
 
 .ams-time-input:not(:disabled):hover {
   box-shadow: var(--ams-time-input-hover-box-shadow);
 }
+
+.ams-time-input:not(:disabled):invalid:hover,
+.ams-time-input:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-time-input-invalid-hover-border-color);
+  box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
+}

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

@@ -45,14 +45,19 @@
   line-height: var(--ams-unordered-list-small-line-height);
 }
 
-:is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
-  gap: var(--ams-unordered-list-unordered-list-gap);
-  list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
-  padding-block-end: var(--ams-unordered-list-unordered-list-padding-block-end);
-  padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start);
+:is(.ams-ordered-list, .ams-unordered-list) {
+  .ams-unordered-list {
+    gap: var(--ams-unordered-list-unordered-list-gap);
+    list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
+    padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start);
+
+    .ams-unordered-list__item {
+      margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);
+      padding-inline-start: var(--ams-unordered-list-unordered-list-item-padding-inline-start);
+    }
+  }
 
-  .ams-unordered-list__item {
-    margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);
-    padding-inline-start: var(--ams-unordered-list-unordered-list-item-padding-inline-start);
+  > :not(:last-child) > .ams-unordered-list {
+    padding-block-end: var(--ams-unordered-list-unordered-list-padding-block-end);
   }
 }

package/dist/page-heading/page-heading.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/page-heading/page-heading.scss","../../src/common/hyphenation.scss","../../src/common/text-rendering.scss"],"names":[],"mappings":"AAYA,kBACE,sBACA,kBACA,mBACA,oCACA,gDACA,4CACA,gDACA,gDACA,4CCfA,kEACA,aACA,yBCEA,kCACA,2BACA,8BACA,sBFJA,eAmBF,2BACE","file":"page-heading.css"}