@amsterdam/design-system-css 0.14.1 → 0.16.0

package/src/components/checkbox/checkbox.scss

@@ -5,6 +5,7 @@
 
 @use "../../common/input-label-focus" as *;
 @use "../../common/hide-input" as *;
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-checkbox__input {
@@ -35,7 +36,7 @@
 
 .ams-checkbox__label {
   color: var(--ams-checkbox-color);
-  cursor: pointer;
+  cursor: var(--ams-checkbox-cursor);
   display: inline-flex;
   font-family: var(--ams-checkbox-font-family);
   font-size: var(--ams-checkbox-font-size);
@@ -44,6 +45,7 @@
   line-height: var(--ams-checkbox-line-height);
   outline-offset: var(--ams-checkbox-outline-offset);
 
+  @include hyphenation;
   @include text-rendering;
 
   &:hover {
@@ -64,7 +66,7 @@
   + .ams-checkbox__label .ams-checkbox__checkmark::after {
     background-color: var(--ams-checkbox-checkmark-checked-background-color);
     background-image: var(--ams-checkbox-checkmark-checked-background-image);
-    border: 0;
+    border: none;
   }
 }
 
@@ -76,7 +78,7 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border: 0;
+    border: none;
   }
 }
 
@@ -92,7 +94,7 @@
 .ams-checkbox__input:disabled {
   + .ams-checkbox__label {
     color: var(--ams-checkbox-disabled-color);
-    cursor: not-allowed;
+    cursor: var(--ams-checkbox-disabled-cursor);
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-disabled-border-color);
@@ -151,7 +153,6 @@
 :is(.ams-checkbox__input:invalid, .ams-checkbox__input[aria-invalid="true"])
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
   border-color: var(--ams-checkbox-checkmark-invalid-hover-border-color);
 }
 
@@ -169,7 +170,6 @@
 :is(.ams-checkbox__input:invalid:checked, .ams-checkbox__input[aria-invalid="true"]:checked)
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
   background-color: var(--ams-checkbox-checkmark-invalid-checked-hover-background-color);
 }
 
@@ -177,7 +177,6 @@
 :is(.ams-checkbox__input:invalid:indeterminate, .ams-checkbox__input[aria-invalid="true"]:indeterminate)
   + .ams-checkbox__label:hover
   .ams-checkbox__checkmark::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
   background-color: var(--ams-checkbox-checkmark-invalid-indeterminate-hover-background-color);
 }
 

package/src/components/column/column.scss

@@ -3,22 +3,23 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "../../common/size" as *;
-
 .ams-column {
   display: flex;
   flex-direction: column;
-  gap: var(--ams-column-gap-md);
+  gap: var(--ams-column-gap-medium);
 }
 
-@each $size, $label in $ams-sizes {
-  @if $size != "md" {
-    .ams-column--gap-#{$label} {
-      gap: var(--ams-column-gap-#{$size});
-    }
+@each $size in ("x-small", "small", "large", "x-large") {
+  .ams-column--gap-#{$size} {
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+    gap: var(--ams-column-gap-#{$size});
   }
 }
 
+.ams-column--gap-none {
+  gap: 0;
+}
+
 .ams-column--align-around {
   justify-content: space-around;
 }

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

@@ -8,7 +8,7 @@
 @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: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
@@ -47,7 +47,7 @@
 .ams-date-input::-webkit-calendar-picker-indicator {
   appearance: none;
   background-image: var(--ams-date-input-calender-picker-indicator-background-image);
-  cursor: pointer;
+  cursor: var(--ams-date-input-calender-picker-indicator-cursor);
 }
 
 .ams-date-input:hover::-webkit-calendar-picker-indicator {
@@ -58,7 +58,7 @@
   background-color: var(--ams-date-input-disabled-background-color);
   box-shadow: var(--ams-date-input-disabled-box-shadow);
   color: var(--ams-date-input-disabled-color);
-  cursor: not-allowed;
+  cursor: var(--ams-date-input-disabled-cursor);
 }
 
 .ams-date-input:disabled::-webkit-calendar-picker-indicator {
@@ -71,7 +71,6 @@
   box-shadow: var(--ams-date-input-invalid-box-shadow);
 
   &:hover {
-    // TODO: this should be the (currently non-existent) dark red hover color
     box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
   }
 }

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

@@ -4,6 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-dl {
@@ -25,6 +26,7 @@
   row-gap: var(--ams-description-list-row-gap);
 
   @include reset-dl;
+  @include hyphenation;
   @include text-rendering;
 }
 
@@ -34,23 +36,23 @@
     grid-template-columns: auto 1fr;
   }
 
-  .ams-description-list--terms-width-sm,
-  .ams-description-list--terms-width-sm .ams-description-list__section {
-    grid-template-columns: 1fr 4fr;
+  .ams-description-list--narrow,
+  .ams-description-list--narrow .ams-description-list__section {
+    grid-template-columns: var(--ams-description-list-narrow-grid-template-columns);
   }
 
-  .ams-description-list--terms-width-md,
-  .ams-description-list--terms-width-md .ams-description-list__section {
-    grid-template-columns: 1fr 2fr;
+  .ams-description-list--medium,
+  .ams-description-list--medium .ams-description-list__section {
+    grid-template-columns: var(--ams-description-list-medium-grid-template-columns);
   }
 
-  .ams-description-list--terms-width-lg,
-  .ams-description-list--terms-width-lg .ams-description-list__section {
-    grid-template-columns: 1fr 1fr;
+  .ams-description-list--wide,
+  .ams-description-list--wide .ams-description-list__section {
+    grid-template-columns: var(--ams-description-list-wide-grid-template-columns);
   }
 }
 
-.ams-description-list--inverse-color {
+.ams-description-list--inverse {
   color: var(--ams-description-list-inverse-color);
 }
 

package/src/components/dialog/README.md

@@ -2,7 +2,7 @@
 
 # Dialog
 
-A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action.
+A popup window in which the user must perform an action to proceed.
 
 ## Guidelines
 
@@ -10,6 +10,8 @@ A Dialog allows the user to focus on one task or a piece of information by poppi
 - Use a dialog for short and non-frequent tasks.
   Consider using the main flow for regular tasks.
 - Wrap multiple buttons in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
+- To open the Dialog, use `Dialog.open(dialogId)` from the React package.
+- To close it, either call the `Dialog.close` function or add a `<form>` as in the ‘confirmation’ example.
 
 ## Keyboard support
 
@@ -19,10 +21,6 @@ A Dialog allows the user to focus on one task or a piece of information by poppi
 | Shift + Tab | Moves focus to the previous focusable element inside the dialog. |
 | Escape      | Closes the dialog.                                               |
 
-## Closing Dialog without submit
-
-You can close a Dialog without submitting by using `<button type="button" onClick={Dialog.close}>`.
-
 ## References
 
 - [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)

package/src/components/dialog/dialog.scss

@@ -3,8 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/breakpoint" as *;
+
 @mixin reset-dialog {
   inset-block: 0;
+  padding-block: 0;
+  padding-inline: 0;
 }
 
 /* A dialog must have `display: none` until the `open` attribute is set,
@@ -13,20 +17,26 @@ so do not apply these styles without an `open` attribute. */
   background-color: var(--ams-dialog-background-color);
   border: var(--ams-dialog-border);
   box-sizing: border-box;
-  display: flex; // Using flex here, because grid works strangely in Safari
+  display: flex; // We’d like to use CSS Grid here, but that doesn’t work as expected in Safari.
   flex-direction: column;
   gap: var(--ams-dialog-gap);
   inline-size: var(--ams-dialog-inline-size);
   max-block-size: var(--ams-dialog-max-block-size);
   max-inline-size: var(--ams-dialog-max-inline-size);
-  padding-block: var(--ams-dialog-padding-block);
-  padding-inline: var(--ams-dialog-padding-inline);
 
   @include reset-dialog;
 
-  /* No token because dialog does not inherit from any element in FireFox and Safari */
+  @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);
+  }
+
+  /*
+   * The fallback value is for browsers where ::backdrop does not inherit from its originating element.
+   * @see https://caniuse.com/mdn-css_selectors_backdrop_inherit_from_originating_element
+   */
   &::backdrop {
-    background: #0006;
+    background: var(--ams-dialog-backdrop-background-color, rgb(24 24 24 / 62.5%));
   }
 }
 
@@ -35,9 +45,32 @@ so do not apply these styles without an `open` attribute. */
   display: flex;
   gap: var(--ams-dialog-header-gap);
   justify-content: space-between;
+  padding-block: var(--ams-dialog-header-padding-block);
+  padding-inline: var(--ams-dialog-header-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-block: var(--ams-dialog-header-medium-padding-block);
+    padding-inline: var(--ams-dialog-header-medium-padding-inline);
+  }
 }
 
 .ams-dialog__body {
   overflow-y: auto;
   overscroll-behavior-y: contain;
+  padding-block: var(--ams-dialog-body-padding-block);
+  padding-inline: var(--ams-dialog-body-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-dialog-body-medium-padding-inline);
+  }
+}
+
+.ams-dialog__footer {
+  padding-block: var(--ams-dialog-footer-padding-block);
+  padding-inline: var(--ams-dialog-footer-padding-inline);
+
+  @media screen and (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/error-message/error-message.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-p {
@@ -19,6 +20,7 @@
   gap: var(--ams-error-message-gap);
   line-height: var(--ams-error-message-line-height);
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-p;
 }

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

@@ -7,7 +7,7 @@
 @use "../../common/text-rendering" as *;
 
 @mixin reset-fieldset {
-  border: 0;
+  border: none;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
@@ -30,23 +30,24 @@
   padding-inline: 0;
 
   + * {
-    clear: both; // Reset the applied float for the legend’s first sibling
+    clear: both; // [2]
   }
 }
 
-// [1] This combination allows the fieldset border to go around the legend, instead of through it.
-
 .ams-field-set__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);
   font-weight: var(--ams-field-set-legend-font-weight);
   line-height: var(--ams-field-set-legend-line-height);
-  margin-block-end: var(
-    --ams-field-set-legend-margin-block-end
-  ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
+  margin-block-end: var(--ams-field-set-legend-margin-block-end); // [3]
+  text-wrap: var(--ams-field-set-legend-text-wrap);
 
   @include hyphenation;
   @include text-rendering;
   @include reset-legend;
 }
+
+// [1] This combination allows the fieldset border to go around the legend, instead of through 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

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-figure {
@@ -25,9 +26,10 @@
   font-weight: var(--ams-figure-caption-font-weight);
   line-height: var(--ams-figure-caption-line-height);
 
+  @include hyphenation;
   @include text-rendering;
 }
 
-.ams-figure__caption--inverse-color {
+.ams-figure__caption--inverse {
   color: var(--ams-figure-caption-inverse-color);
 }

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

@@ -6,7 +6,7 @@
 @use "../../common/text-rendering" as *;
 
 @mixin reset-button {
-  border: 0;
+  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
 }
 
@@ -21,7 +21,7 @@
   font-weight: var(--ams-file-input-font-weight);
   inline-size: 100%;
   line-height: var(--ams-file-input-line-height);
-  outline-offset: calc(var(--ams-focus-outline-offset) * 2); // Compensate for the dashed border
+  outline-offset: var(--ams-file-input-outline-offset);
   padding-block: var(--ams-file-input-padding-block);
   padding-inline: var(--ams-file-input-padding-inline);
   touch-action: manipulation;

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

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-ul {
@@ -17,13 +18,13 @@
   gap: var(--ams-file-list-gap);
   padding-block: var(--ams-file-list-padding-block);
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-ul;
 }
 
 .ams-file-list__item {
   display: flex;
-  flex-direction: row;
   font-family: var(--ams-file-list-file-font-family);
   font-size: var(--ams-file-list-file-font-size);
   font-weight: var(--ams-file-list-file-font-weight);

package/src/components/gap/README.md

@@ -6,15 +6,19 @@ Adds white space between a set of elements.
 
 ## Class names
 
-The five sizes of [Component Space](/docs/brand-design-tokens-space--docs) are available for the width or height of the gap.
-
-| Class name    | Example                                                                                   |
-| ------------- | ----------------------------------------------------------------------------------------- |
-| `ams-gap--xs` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-xs);" /> |
-| `ams-gap--sm` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-sm);" /> |
-| `ams-gap--md` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-md);" /> |
-| `ams-gap--lg` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-lg);" /> |
-| `ams-gap--xl` | <div className="ams-docs-token-example--space" style="inline-size: var(--ams-gap-xl);" /> |
+Five options are available for the width or height of the gap:
+
+- `ams-gap-xs`
+- `ams-gap-s`
+- `ams-gap-m`
+- `ams-gap-l`
+- `ams-gap-xl`
+
+Because spacing is responsive, the gaps are as well.
+They are also smaller in Compact Mode.
+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/gap/gap.scss

@@ -3,17 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 
-@use "sass:map";
-@use "../../common/size" as *;
-
-[class|="ams-gap-"] {
-  display: grid !important;
-}
-
-@each $size in map.keys($ams-sizes) {
-  @if $size != "no" {
-    .ams-gap--#{$size} {
-      grid-gap: var(--ams-gap-#{$size}) !important;
-    }
+// If you modify this list, you must also update the object in
+// packages/react/src/common/shortSize.ts
+// Note that we don’t offer a 2xl gap on purpose.
+@each $size in ("xs", "s", "m", "l", "xl") {
+  .ams-gap-#{$size} {
+    display: grid !important;
+    /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+    gap: var(--ams-space-#{$size}) !important;
   }
 }

package/src/components/grid/README.md

@@ -6,14 +6,15 @@ Divides the screen into columns to align the elements of a page.
 
 ## Guidelines
 
-- Every page should use the grid as the foundation for its layout.
-  It is placed directly within the [Screen](/docs/components-layout-screen--docs).
-- A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid.
-  You close one instance of the grid before these components.
-  Inside and optionally after them, you start a new one.
-  Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely.
-- Within the grid, you create cells containing the desired content.
-  A cell often spans multiple columns of the grid.
+- Every page uses the Grid component as the foundation for its layout.
+  It is a direct child of the [Page](/docs/components-containers-page--docs) container.
+- The Grid provides 4, 8, or 12 columns, depending on the width of the window.
+- Its children are `Grid.Cell` components that define how many columns they span, and optionally where they start.
+  Both its `span` and `start` properties accept a single value, or separate values for the narrow, medium and wide variations of the Grid.
+- A single page can have several Grids.
+  This allows mixing a Grid with a [Spotlight](/docs/components-containers-spotlight--docs), [Breakout](/docs/components-layout-breakout--docs) or full width [Image](/docs/components-media-image--docs) which ‘bleed out’ of the main layout.
+- Grids must not be nested.
+  The component is currently intended for the full width of the page only.
 - The Gap utility classes must not be used on the Grid component.
 
 ## Design

package/src/components/grid/_mixins.scss

@@ -1,23 +1,25 @@
-@use "../../common/breakpoint" as *;
-
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/breakpoint" as *;
+
 @mixin ams-grid {
   column-gap: var(--ams-grid-column-gap);
   display: grid;
   grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
   padding-inline: var(--ams-grid-padding-inline);
-  row-gap: var(--ams-grid-row-gap-md);
+  row-gap: var(--ams-grid-row-gap-xl);
 
   @media screen and (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) {
     grid-template-columns: repeat(var(--ams-grid-wide-column-count), 1fr);
+    padding-inline: var(--ams-grid-wide-padding-inline);
   }
 }
 
@@ -27,50 +29,50 @@
   row-gap: initial;
 }
 
-@mixin ams-grid--gap-vertical--small {
-  row-gap: var(--ams-grid-row-gap-sm);
+@mixin ams-grid--gap-vertical--large {
+  row-gap: var(--ams-grid-row-gap-l);
 }
 
-@mixin ams-grid--gap-vertical--large {
-  row-gap: var(--ams-grid-row-gap-lg);
+@mixin ams-grid--gap-vertical--2x-large {
+  row-gap: var(--ams-grid-row-gap-2xl);
 }
 
 // Grid padding
 
-@mixin ams-grid--padding-bottom--small {
-  padding-block-end: var(--ams-grid-padding-block-sm);
+@mixin ams-grid--padding-bottom--large {
+  padding-block-end: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-bottom--medium {
-  padding-block-end: var(--ams-grid-padding-block-md);
+@mixin ams-grid--padding-bottom--x-large {
+  padding-block-end: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-bottom--large {
-  padding-block-end: var(--ams-grid-padding-block-lg);
+@mixin ams-grid--padding-bottom--2x-large {
+  padding-block-end: var(--ams-grid-padding-block-2xl);
 }
 
-@mixin ams-grid--padding-top--small {
-  padding-block-start: var(--ams-grid-padding-block-sm);
+@mixin ams-grid--padding-top--large {
+  padding-block-start: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-top--medium {
-  padding-block-start: var(--ams-grid-padding-block-md);
+@mixin ams-grid--padding-top--x-large {
+  padding-block-start: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-top--large {
-  padding-block-start: var(--ams-grid-padding-block-lg);
+@mixin ams-grid--padding-top--2x-large {
+  padding-block-start: var(--ams-grid-padding-block-2xl);
 }
 
-@mixin ams-grid--padding-vertical--small {
-  padding-block: var(--ams-grid-padding-block-sm);
+@mixin ams-grid--padding-vertical--large {
+  padding-block: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-vertical--medium {
-  padding-block: var(--ams-grid-padding-block-md);
+@mixin ams-grid--padding-vertical--x-large {
+  padding-block: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-vertical--large {
-  padding-block: var(--ams-grid-padding-block-lg);
+@mixin ams-grid--padding-vertical--2x-large {
+  padding-block: var(--ams-grid-padding-block-2xl);
 }
 
 @mixin ams-grid__cell--span-all {