@amsterdam/design-system-css 3.0.0 → 3.2.0

package/src/common/resets.scss

@@ -0,0 +1,106 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset-body {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+@mixin reset-blockquote {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+@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.
+}
+
+@mixin reset-dd {
+  margin-inline: 0;
+}
+
+@mixin reset-dialog {
+  inset-block: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+@mixin reset-dl {
+  margin-block: 0;
+}
+
+@mixin reset-fieldset {
+  border: none;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+@mixin reset-figure {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+@mixin reset-hx {
+  margin-block: 0;
+}
+
+@mixin reset-input {
+  appearance: none; // Reset native appearance on iOS and Android devices
+  border-radius: 0; // Reset rounded borders on iOS devices
+  margin-block: 0;
+}
+
+@mixin reset-legend {
+  /* stylelint-disable-next-line csstools/use-logical */
+  float: left; // [1]
+  inline-size: 100%; // [1]
+  padding-inline: 0;
+
+  + * {
+    clear: both; // [2]
+  }
+
+  // [1] This combination allows the fieldset border to go around the legend, instead of through it.
+  // The actual value for float is not important, a legend should never have elements that wrap around it.
+  // [2] Reset the applied float for the legend’s first sibling.
+}
+
+@mixin reset-ol {
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}
+
+@mixin reset-p {
+  margin-block: 0;
+}
+
+@mixin reset-placeholder {
+  opacity: 100%; // Reset lower opacity set by Firefox
+}
+
+@mixin reset-select {
+  appearance: none; // Reset native appearance to hide default chevron
+  border-radius: 0; // Reset rounded borders for Safari on macOS
+}
+
+@mixin reset-textarea {
+  appearance: none; // Reset native appearance on iOS and Android devices
+  border-radius: 0; // Reset rounded borders on iOS devices
+  margin-block: 0;
+}
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+}

package/src/components/accordion/accordion.scss

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-accordion {
@@ -19,15 +20,9 @@
   /* This class name is deprecated. */
 }
 
-@mixin reset-button {
-  border: none;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-
-  // [1] Remove the margin in older Safari.
-}
-
 .ams-accordion__button {
+  @include reset-button;
+
   background-color: transparent;
   color: var(--ams-accordion-button-color);
   cursor: var(--ams-accordion-button-cursor);
@@ -43,8 +38,6 @@
   padding-inline: var(--ams-accordion-button-padding-inline);
   text-align: start;
 
-  @include reset-button;
-
   &:hover {
     color: var(--ams-accordion-button-hover-color);
   }

package/src/components/aspect-ratio/README.md

@@ -1,5 +1,7 @@
 <!-- @license CC0-1.0 -->
 
+import { SpaceSample } from "../../docs/components/SpaceSample";
+
 # Aspect Ratio
 
 Constrains media content to a supported aspect ratio.
@@ -9,14 +11,14 @@ Constrains media content to a supported aspect ratio.
 Each available aspect ratio has an associated class name.
 The class can be applied to any component or element.
 
-| Class name              | Example                                                                 |
-| :---------------------- | :---------------------------------------------------------------------- |
-| `ams-aspect-ratio-9-16` | <div className="ams-docs-token-example--space ams-aspect-ratio-9-16" /> |
-| `ams-aspect-ratio-3-4`  | <div className="ams-docs-token-example--space ams-aspect-ratio-3-4" />  |
-| `ams-aspect-ratio-1-1`  | <div className="ams-docs-token-example--space ams-aspect-ratio-1-1" />  |
-| `ams-aspect-ratio-4-3`  | <div className="ams-docs-token-example--space ams-aspect-ratio-4-3" />  |
-| `ams-aspect-ratio-16-9` | <div className="ams-docs-token-example--space ams-aspect-ratio-16-9" /> |
-| `ams-aspect-ratio-16-5` | <div className="ams-docs-token-example--space ams-aspect-ratio-16-5" /> |
+| Class name              | Example                                           |
+| :---------------------- | :------------------------------------------------ |
+| `ams-aspect-ratio-9-16` | <SpaceSample className="ams-aspect-ratio-9-16" /> |
+| `ams-aspect-ratio-3-4`  | <SpaceSample className="ams-aspect-ratio-3-4" />  |
+| `ams-aspect-ratio-1-1`  | <SpaceSample className="ams-aspect-ratio-1-1" />  |
+| `ams-aspect-ratio-4-3`  | <SpaceSample className="ams-aspect-ratio-4-3" />  |
+| `ams-aspect-ratio-16-9` | <SpaceSample className="ams-aspect-ratio-16-9" /> |
+| `ams-aspect-ratio-16-5` | <SpaceSample className="ams-aspect-ratio-16-5" /> |
 
 ## Guidelines
 

package/src/components/badge/badge.scss

@@ -9,10 +9,11 @@
 .ams-badge {
   background-color: var(--ams-badge-background-color);
   color: var(--ams-badge-color);
-  display: inline-block;
+  display: inline-flex;
   font-family: var(--ams-badge-font-family);
   font-size: var(--ams-badge-font-size);
   font-weight: var(--ams-badge-font-weight);
+  gap: var(--ams-badge-gap);
   line-height: var(--ams-badge-line-height);
   padding-inline: var(--ams-badge-padding-inline);
 

package/src/components/blockquote/blockquote.scss

@@ -4,14 +4,12 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-blockquote {
-  margin-block: 0;
-  margin-inline: 0;
-}
-
 .ams-blockquote {
+  @include reset-blockquote;
+
   box-sizing: border-box;
   break-inside: avoid;
   color: var(--ams-blockquote-color);
@@ -23,7 +21,6 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-blockquote;
 
   &::before {
     content: open-quote;

package/src/components/breadcrumb/breadcrumb.scss

@@ -4,13 +4,9 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ol {
-  margin-block: 0;
-  padding-inline: 0;
-}
-
 .ams-breadcrumb {
   /*
    * If break-after is supported, use it to avoid Breadcrumbs from being the last item on a page when printed.
@@ -25,12 +21,13 @@
 }
 
 .ams-breadcrumb__list {
+  @include reset-ol;
+
   box-sizing: border-box;
   break-inside: avoid;
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ol;
 }
 
 .ams-breadcrumb__item {

package/src/components/button/button.scss

@@ -4,19 +4,15 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-button {
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-
-  // [1] Remove the margin in older Safari.
-}
-
 .ams-button {
   // Override line height for Icon in Button.
   --ams-icon-line-height: var(--ams-button-line-height);
 
+  @include reset-button;
+
   border-style: var(--ams-button-border-style);
   border-width: var(--ams-button-border-width);
   cursor: var(--ams-button-cursor);
@@ -34,7 +30,6 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-button;
 
   &:disabled,
   &[aria-disabled="true"] {

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

@@ -3,30 +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;
-
-  &::-webkit-datetime-edit,
-  &::-webkit-datetime-edit-ampm-field,
-  &::-webkit-datetime-edit-day-field,
-  &::-webkit-datetime-edit-fields-wrapper,
-  &::-webkit-datetime-edit-hour-field,
-  &::-webkit-datetime-edit-millisecond-field,
-  &::-webkit-datetime-edit-minute-field,
-  &::-webkit-datetime-edit-month-field,
-  &::-webkit-datetime-edit-second-field,
-  &::-webkit-datetime-edit-week-field,
-  &::-webkit-datetime-edit-year-field {
-    padding-block: 0; // Override value of 1px in UA stylesheet
-  }
-}
-
 .ams-date-input {
+  @include reset-input;
+
   background-color: var(--ams-date-input-background-color);
   border-color: var(--ams-date-input-border-color);
   border-style: var(--ams-date-input-border-style);
@@ -51,7 +33,21 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
+
+  // Reset padding on webkit date edit fields to override the value of 1px in the UA stylesheet.
+  &::-webkit-datetime-edit,
+  &::-webkit-datetime-edit-ampm-field,
+  &::-webkit-datetime-edit-day-field,
+  &::-webkit-datetime-edit-fields-wrapper,
+  &::-webkit-datetime-edit-hour-field,
+  &::-webkit-datetime-edit-millisecond-field,
+  &::-webkit-datetime-edit-minute-field,
+  &::-webkit-datetime-edit-month-field,
+  &::-webkit-datetime-edit-second-field,
+  &::-webkit-datetime-edit-week-field,
+  &::-webkit-datetime-edit-year-field {
+    padding-block: 0;
+  }
 }
 
 // This changes the default calendar icon on Chromium browsers only
@@ -70,11 +66,6 @@
   cursor: var(--ams-date-input-disabled-cursor);
 }
 
-.ams-date-input:disabled::-webkit-calendar-picker-indicator {
-  background-image: var(--ams-date-input-disabled-calendar-picker-indicator-background-image);
-  visibility: visible;
-}
-
 .ams-date-input:not(:disabled):invalid,
 .ams-date-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-date-input-invalid-border-color);

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

@@ -6,7 +6,7 @@ A collection of terms and their descriptions.
 
 ## Design
 
-In a narrow window, descriptions appear indented below their term.
+In a narrow window, descriptions appear below their term.
 After that, they display in a two-column layout.
 The column for the terms is as wide as the longest term, without wrapping.
 Its width can be adjusted to be ‘large’ (50%), ‘medium’ (33%), or ‘small’ (20%), which also allows the terms to wrap.

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

@@ -5,27 +5,17 @@
 
 @use "../../common/breakpoint" as *;
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-dl {
-  margin-block: 0;
-}
-
-@mixin reset-dd {
-  margin-inline: 0;
-}
-
 .ams-description-list {
-  box-sizing: border-box;
+  @include reset-dl;
+
   color: var(--ams-description-list-color);
-  column-gap: var(--ams-description-list-column-gap);
-  display: grid;
   font-family: var(--ams-description-list-font-family);
   font-size: var(--ams-description-list-font-size);
   line-height: var(--ams-description-list-line-height);
-  row-gap: var(--ams-description-list-row-gap);
 
-  @include reset-dl;
   @include hyphenation;
   @include text-rendering;
 }
@@ -33,6 +23,9 @@
 @media screen and (min-width: $ams-breakpoint-medium) {
   .ams-description-list,
   .ams-description-list__section {
+    align-items: start;
+    column-gap: var(--ams-description-list-column-gap);
+    display: grid;
     grid-template-columns: auto 1fr;
   }
 
@@ -58,32 +51,61 @@
 
 .ams-description-list__term {
   font-weight: var(--ams-description-list-term-font-weight);
+  margin-block-end: var(--ams-description-list-term-margin-block-end);
+
+  // 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;
+
+    // Depend on Descriptions for vertical spacing
+    margin-block-end: 0;
   }
 }
 
 .ams-description-list__section {
+  margin-block-end: var(--ams-description-list-section-margin-block-end);
+
   @media screen and (min-width: $ams-breakpoint-medium) {
-    column-gap: var(--ams-description-list-column-gap);
-    display: grid;
+    // Let a Section span both columns of the parent List
     grid-column: span 2;
 
     > :only-of-type {
+      // Vertically stretch a single Term or Description
       grid-row: 1 / 9;
     }
   }
 }
 
 .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);
 
-  @include reset-dd;
-
   @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 {
+  > .ams-description-list__term:last-child,
+  > .ams-description-list__description:last-child,
+  > .ams-description-list__section:last-child,
+  > .ams-description-list__section:last-child > .ams-description-list__term:last-child,
+  > .ams-description-list__section:last-child > .ams-description-list__description:last-child {
+    margin-block-end: 0;
+  }
+}

package/src/components/dialog/dialog.scss

@@ -4,20 +4,19 @@
  */
 
 @use "../../common/breakpoint" as *;
-
-@mixin reset-dialog {
-  inset-block: 0;
-  padding-block: 0;
-  padding-inline: 0;
-}
+@use "../../common/resets" as *;
 
 /* A dialog must have `display: none` until the `open` attribute is set,
 so do not apply these styles without an `open` attribute. */
 .ams-dialog:not(dialog:not([open])) {
+  @include reset-dialog;
+
   background-color: var(--ams-dialog-background-color);
   border-color: var(--ams-dialog-border-color);
+  border-radius: var(--ams-dialog-border-radius);
   border-style: var(--ams-dialog-border-style);
   border-width: var(--ams-dialog-border-width);
+  box-shadow: var(--ams-dialog-box-shadow);
   box-sizing: border-box;
   display: flex; // We’d like to use CSS Grid here, but that doesn’t work as expected in Safari.
   flex-direction: column;
@@ -26,8 +25,6 @@ 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);
 
-  @include reset-dialog;
-
   @media screen and (min-width: $ams-breakpoint-medium) {
     inline-size: var(--ams-dialog-medium-inline-size);
     max-block-size: var(--ams-dialog-medium-max-block-size);

package/src/components/document/document.scss

@@ -3,10 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset-body {
-  margin-block: 0;
-  margin-inline: 0;
-}
+@use "../../common/resets" as *;
 
 // Add this class if you haven’t removed the default margin on the `<body>` element.
 .ams-body {

package/src/components/error-message/error-message.scss

@@ -4,16 +4,15 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-p {
-  margin-block: 0;
-}
-
 .ams-error-message {
+  @include reset-p;
+
   box-sizing: border-box;
   color: var(--ams-error-message-color);
-  display: inline-flex;
+  display: flex;
   font-family: var(--ams-error-message-font-family);
   font-size: var(--ams-error-message-font-size);
   font-weight: var(--ams-error-message-font-weight);
@@ -22,5 +21,4 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-p;
 }

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

@@ -4,63 +4,49 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-fieldset {
-  border: none;
-  margin-inline: 0;
-  padding-block: 0;
-  padding-inline: 0;
-}
-
 .ams-field-set {
-  break-inside: avoid;
-
   @include reset-fieldset;
+
+  break-inside: avoid;
 }
 
-// Default margin between all direct children of FieldSet
+// Default margin between all direct children of Field Set
+// We can’t use grid or flex display and a gap because of a bug in Chrome.
 .ams-field-set > :not(:last-child) {
-  margin-block-end: var(--ams-field-set-child-margin-block-end); // [3]
+  margin-block-end: var(--ams-field-set-child-margin-block-end);
 }
 
+/* stylelint-disable plugin/use-baseline -- Without support for `:has`, all elements have the same spacing, which is acceptable. */
+
 // We use :has here to increase the margin before the error message.
-// If :has is not supported, all elements will have the default gap defined above, which is acceptable.
-/* stylelint-disable-next-line plugin/use-baseline */
 .ams-field-set > :has(+ .ams-error-message) {
   margin-block-end: var(--ams-field-set-child-before-error-message-margin-block-end);
 }
 
-// If a FieldSet contains a Field or another FieldSet, increase the margin of the preceding element.
-/* stylelint-disable-next-line plugin/use-baseline */
+// If a Field Set contains a Field or another Field Set, increase the margin of the preceding element.
 .ams-field-set > :has(+ .ams-field),
 .ams-field-set > :has(+ .ams-field-set) {
   margin-block-end: var(--ams-field-set-child-before-field-or-field-set-margin-block-end);
 }
 
-// If a FieldSet contains multiple Fields or FieldSets, increase the margin between them.
-/* stylelint-disable-next-line plugin/use-baseline */
+// If a Field Set contains multiple Fields or Field Sets, increase the margin between them.
 .ams-field-set > :is(.ams-field, .ams-field-set):has(+ :is(.ams-field, .ams-field-set)) {
   margin-block-end: var(--ams-field-set-child-between-fields-and-field-sets-margin-block-end);
 }
 
+/* stylelint-enable plugin/use-baseline */
+
 .ams-field-set--invalid {
   border-inline-start: var(--ams-field-set-invalid-border-inline-start);
   padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
 }
 
-@mixin reset-legend {
-  /* stylelint-disable-next-line csstools/use-logical */
-  float: left; // [1]
-  inline-size: 100%; // [1]
-  padding-inline: 0;
-
-  + * {
-    clear: both; // [2]
-  }
-}
-
 .ams-field-set__legend {
+  @include reset-legend;
+
   color: var(--ams-field-set-legend-color);
   font-family: var(--ams-field-set-legend-font-family);
   font-size: var(--ams-field-set-legend-font-size);
@@ -76,7 +62,6 @@
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-legend;
 }
 
 .ams-field-set__legend--in-fieldset {
@@ -88,8 +73,3 @@
   font-weight: inherit;
   margin-block: 0;
 }
-
-// [1] This combination allows the fieldset border to go around the legend, instead of through it.
-// The actual value for float is not important, a legend should never have elements that wrap around it.
-// [2] Reset the applied float for the legend’s first sibling.
-// [3] We can’t use grid or flex display and a gap because of a bug in Chrome.

package/src/components/figure/figure.scss

@@ -4,19 +4,15 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-figure {
-  margin-block: 0;
-  margin-inline: 0;
-}
-
 .ams-figure {
+  @include reset-figure;
+
   display: flex;
   flex-direction: column;
   gap: var(--ams-figure-gap);
-
-  @include reset-figure;
 }
 
 .ams-figure__caption {

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

@@ -3,12 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-button {
-  border-radius: 0; // Reset rounded borders on iOS devices
-}
-
 .ams-file-input {
   background-color: var(--ams-file-input-background-color);
   border-color: var(--ams-file-input-border-color);
@@ -36,8 +33,9 @@
 }
 
 .ams-file-input::file-selector-button {
-  -webkit-appearance: none; // Reset appearance for Safari < 15.4
-  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  @include reset-button;
+
+  appearance: none; // Reset native appearance on iOS and Android devices
   background-color: var(--ams-file-input-file-selector-button-background-color);
   border-color: var(--ams-file-input-file-selector-button-border-color);
   border-style: var(--ams-file-input-file-selector-button-border-style);
@@ -52,8 +50,6 @@
   margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
   padding-block: var(--ams-file-input-file-selector-button-padding-block);
   padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
-
-  @include reset-button;
 }
 
 .ams-file-input:disabled::file-selector-button {