@amsterdam/design-system-css 3.0.0 → 3.2.0

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

@@ -0,0 +1,243 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/resets" as *;
+
+@mixin indicator {
+  display: grid;
+  flex: none;
+  place-items: start center;
+}
+
+@mixin marker-shape {
+  aspect-ratio: 1;
+  border-radius: 50%;
+  box-sizing: border-box;
+  display: grid;
+  place-content: center;
+  z-index: 1;
+}
+
+@mixin connector {
+  block-size: 100%;
+  grid-area: 1 / 1;
+}
+
+.ams-progress-list {
+  @include reset-ol;
+}
+
+/* Step */
+
+.ams-progress-list__step {
+  display: flex;
+  gap: var(--ams-progress-list-step-gap);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    gap: var(--ams-progress-list-step-medium-gap);
+  }
+}
+
+/* Indicator: layout container for marker and connector */
+
+.ams-progress-list__indicator {
+  @include indicator;
+}
+
+/* Marker: layout container for shape */
+
+.ams-progress-list__marker {
+  display: flex;
+  grid-area: 1 / 1; /* Overlaps marker and connector */
+  place-items: center;
+
+  .ams-progress-list--heading-2 & {
+    block-size: var(--ams-progress-list-heading-2-step-marker-block-size);
+  }
+
+  .ams-progress-list--heading-3 & {
+    block-size: var(--ams-progress-list-heading-3-step-marker-block-size);
+  }
+
+  .ams-progress-list--heading-4 & {
+    block-size: var(--ams-progress-list-heading-4-step-marker-block-size);
+  }
+}
+
+/* Shape: visual circle in marker */
+
+.ams-progress-list__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)
+    var(--ams-progress-list-step-marker-shape-border-style) var(--ams-progress-list-step-marker-shape-border-color);
+
+  /* Outline adds space between shape and connector */
+  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);
+  }
+
+  .ams-progress-list__step--current & {
+    background-color: var(--ams-progress-list-step-current-marker-shape-background-color);
+    border-color: var(--ams-progress-list-step-current-marker-shape-border-color);
+  }
+}
+
+/* Connector */
+
+.ams-progress-list__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);
+  }
+
+  .ams-progress-list--heading-3 & {
+    margin-block-start: var(--ams-progress-list-heading-3-step-marker-margin-block-start);
+  }
+
+  .ams-progress-list--heading-4 & {
+    margin-block-start: var(--ams-progress-list-heading-4-step-marker-margin-block-start);
+  }
+
+  .ams-progress-list__step--completed & {
+    border-inline-color: var(--ams-progress-list-step-completed-connector-border-inline-color);
+    border-inline-style: var(--ams-progress-list-step-completed-connector-border-inline-style);
+  }
+
+  .ams-progress-list__step--current.ams-progress-list__step--has-substeps & {
+    border-inline-color: var(--ams-progress-list-step-current-connector-border-inline-color);
+    border-inline-style: solid;
+  }
+
+  /* Hide connector for last step, unless it has substeps. */
+  .ams-progress-list > :last-child:not(.ams-progress-list__step--has-substeps) & {
+    display: none;
+  }
+}
+
+/* Content */
+
+.ams-progress-list__content {
+  flex: auto;
+  min-inline-size: 0; /* Ensure content can shrink to fit container */
+
+  /* Add white space below all but the last step and steps with substeps. */
+  .ams-progress-list__step:not(:last-child, .ams-progress-list__step--has-substeps) & {
+    margin-block-end: var(--ams-progress-list-step-content-margin-block-end);
+  }
+}
+
+/* Heading */
+
+.ams-progress-list__heading {
+  margin-block-end: var(--ams-progress-list-step-heading-margin-block-end);
+}
+
+/* Substeps is its own block in BEM and has the same elements as above */
+
+.ams-progress-list-substeps {
+  @include reset-ol;
+
+  * + & {
+    /* Add white space if there is content preceding substeps */
+    padding-block-start: var(--ams-progress-list-substeps-padding-block-start);
+  }
+}
+
+.ams-progress-list-substeps__step {
+  display: flex;
+}
+
+.ams-progress-list-substeps__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(
+      -1 * var(--ams-progress-list-step-medium-gap) - var(--ams-progress-list-step-marker-shape-block-size)
+    );
+  }
+}
+
+.ams-progress-list-substeps__marker {
+  block-size: var(--ams-progress-list-substeps-step-marker-block-size);
+  display: grid;
+  grid-area: 1/1;
+  inline-size: var(--ams-progress-list-substeps-step-marker-inline-size);
+  place-items: center;
+}
+
+.ams-progress-list-substeps__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)
+    var(--ams-progress-list-substeps-step-marker-shape-border-style)
+    var(--ams-progress-list-substeps-step-marker-shape-border-color);
+
+  /* Outline is used to create space between shape and connector */
+  outline: var(--ams-progress-list-substeps-step-marker-shape-outline-width)
+    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);
+  }
+
+  .ams-progress-list-substeps__step--current & {
+    background-color: var(--ams-progress-list-substeps-step-current-marker-shape-background-color);
+    border-color: var(--ams-progress-list-substeps-step-current-marker-shape-border-color);
+  }
+}
+
+.ams-progress-list-substeps__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)
+    var(--ams-progress-list-substeps-step-connector-border-inline-style)
+    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);
+  }
+
+  /* Hide connector when it belongs to the last substep of last main step. Our value for this token is white. */
+  .ams-progress-list__step:last-child .ams-progress-list-substeps__step:last-child & {
+    border-inline-color: var(--ams-progress-list-substeps-step-connector-last-child-border-inline-color);
+  }
+}
+
+.ams-progress-list-substeps__content {
+  /* Add white space below all substeps except for the last. Our value for this token is medium space. */
+  margin-block-end: var(--ams-progress-list-substeps-step-content-margin-block-end);
+
+  /* Add white space below the last substep. Our value for this token is large space. */
+  .ams-progress-list-substeps__step:last-child & {
+    margin-block-end: var(--ams-progress-list-substeps-last-child-content-margin-block-end);
+  }
+}

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
 

package/src/components/table-of-contents/table-of-contents.scss

@@ -4,13 +4,9 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  margin-block: 0;
-  padding-inline: 0;
-}
-
 .ams-table-of-contents {
   display: flex;
   flex-direction: column;
@@ -22,15 +18,15 @@
 }
 
 .ams-table-of-contents__list {
+  @include reset-ul;
+
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--ams-table-of-contents-list-gap);
-  list-style: none;
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 
   .ams-table-of-contents__list {
     padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);

package/src/components/tabs/tabs.scss

@@ -4,15 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
-
-@mixin reset-button {
-  background-color: transparent;
-  border: none;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-
-  // [1] Remove the margin in older Safari.
-}
+@use "../../common/resets" as *;
 
 .ams-tabs {
   display: grid;
@@ -26,6 +18,9 @@
 }
 
 .ams-tabs__button {
+  @include reset-button;
+
+  background-color: transparent;
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
   display: grid;
@@ -38,8 +33,6 @@
   padding-block: var(--ams-tabs-button-padding-block);
   padding-inline: var(--ams-tabs-button-padding-inline);
 
-  @include reset-button;
-
   &:disabled {
     color: var(--ams-tabs-button-disabled-color);
     cursor: var(--ams-tabs-button-disabled-cursor);

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

@@ -3,16 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-textarea {
-  -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-text-area {
+  @include reset-textarea;
+
   background-color: var(--ams-text-area-background-color);
   border-color: var(--ams-text-area-border-color);
   border-style: var(--ams-text-area-border-style);
@@ -32,17 +28,12 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @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);
-
   @include reset-placeholder;
+
+  color: var(--ams-text-area-placeholder-color);
 }
 
 .ams-text-area:disabled {

package/src/components/text-input/text-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-text-input {
+  @include reset-input;
+
   background-color: var(--ams-text-input-background-color);
   border-color: var(--ams-text-input-border-color);
   border-style: var(--ams-text-input-border-style);
@@ -30,21 +26,16 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
 }
 
 .ams-text-input:not([size]) {
   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);
-
   @include reset-placeholder;
+
+  color: var(--ams-text-input-placeholder-color);
 }
 
 .ams-text-input:disabled {

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

@@ -3,27 +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
-  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 {
+  @include reset-input;
+
   background-color: var(--ams-time-input-background-color);
   border-color: var(--ams-time-input-border-color);
   border-style: var(--ams-time-input-border-style);
@@ -33,6 +18,9 @@
   font-family: var(--ams-time-input-font-family);
   font-size: var(--ams-time-input-font-size);
   font-weight: var(--ams-time-input-font-weight);
+
+  // Reset inline size of 10em set by Android devices.
+  inline-size: auto;
   line-height: var(--ams-time-input-line-height);
 
   // Set min block size for iOS, otherwise an empty box is a lot smaller than a filled one.
@@ -48,7 +36,17 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
+
+  // Reset padding on webkit time edit fields to override the value of 1px in the UA stylesheet.
+  &::-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;
+  }
 }
 
 // This changes the default calendar icon on Chromium browsers only
@@ -67,11 +65,6 @@
   cursor: var(--ams-time-input-disabled-cursor);
 }
 
-.ams-time-input:disabled::-webkit-calendar-picker-indicator {
-  background-image: var(--ams-time-input-disabled-calendar-picker-indicator-background-image);
-  visibility: visible;
-}
-
 .ams-time-input:not(:disabled):invalid,
 .ams-time-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-time-input-invalid-border-color);

package/src/components/unordered-list/unordered-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-unordered-list {
+  @include reset-ul;
+
   box-sizing: border-box;
   display: grid;
   gap: var(--ams-unordered-list-gap);
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 }
 
 .ams-unordered-list:not(.ams-unordered-list--no-markers) {