@amsterdam/design-system-css 0.14.0 → 0.15.0

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

@@ -9,14 +9,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--x-tall`  | <div className="ams-docs-token-example--space ams-aspect-ratio--x-tall" />  |
-| `ams-aspect-ratio--tall`    | <div className="ams-docs-token-example--space ams-aspect-ratio--tall" />    |
-| `ams-aspect-ratio--square`  | <div className="ams-docs-token-example--space ams-aspect-ratio--square" />  |
-| `ams-aspect-ratio--wide`    | <div className="ams-docs-token-example--space ams-aspect-ratio--wide" />    |
-| `ams-aspect-ratio--x-wide`  | <div className="ams-docs-token-example--space ams-aspect-ratio--x-wide" />  |
-| `ams-aspect-ratio--2x-wide` | <div className="ams-docs-token-example--space ams-aspect-ratio--2x-wide" /> |
+| 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" /> |
 
 ## Guidelines
 

package/src/components/aspect-ratio/aspect-ratio.scss

@@ -4,9 +4,12 @@
  */
 
 .ams-aspect-ratio {
-  @each $name in ("x-tall", "tall", "square", "wide", "x-wide", "2x-wide") {
-    &--#{$name} {
-      aspect-ratio: var(--ams-aspect-ratio-#{$name}) !important;
+  // If you modify this list, you must also update the
+  // aspectRatioOptions in packages/react/src/common/types.ts
+  @each $value in ("9-16", "3-4", "1-1", "4-3", "16-9", "16-5") {
+    &-#{$value} {
+      /* stylelint-disable-next-line csstools/value-no-unknown-custom-properties */
+      aspect-ratio: var(--ams-aspect-ratio-#{$value}) !important;
     }
   }
 }

package/src/components/avatar/README.md

@@ -6,10 +6,11 @@ A circular badge representing a person.
 
 ## Design
 
-The avatar contains 1 or 2 initial letters from the person's full name, a picture, or a generic icon.
-The default background colour is dark blue.
+- The avatar contains 1 or 2 initial letters from the person’s full name, a picture, or a generic icon.
 
 ## Guidelines
 
-- Display an avatar for the person currently using the application,
-  or to associate a person with a content item.
+- Show an avatar for the user of the application, or to associate a person with a content item.
+- To personalize the Avatar, the user can be allowed to choose one of the [highlight colours](/docs/brand-design-tokens-colour--docs).
+  The default is purple.
+  The design system does not define a meaning to any of these background colours.

package/src/components/avatar/avatar.scss

@@ -5,7 +5,9 @@
 
 .ams-avatar {
   aspect-ratio: var(--ams-avatar-aspect-ratio);
+  background-color: var(--ams-avatar-background-color);
   border-radius: 50%;
+  color: var(--ams-avatar-color);
   display: inline-flex;
   font-family: var(--ams-avatar-font-family);
   font-size: var(--ams-avatar-font-size);
@@ -37,19 +39,9 @@
   vertical-align: middle; /* Remove ‘phantom’ white space when image doesn’t load */
 }
 
-.ams-avatar--black {
-  background-color: var(--ams-avatar-black-background-color);
-  color: var(--ams-avatar-black-color);
-}
-
-.ams-avatar--blue {
-  background-color: var(--ams-avatar-blue-background-color);
-  color: var(--ams-avatar-blue-color);
-}
-
-.ams-avatar--dark-green {
-  background-color: var(--ams-avatar-dark-green-background-color);
-  color: var(--ams-avatar-dark-green-color);
+.ams-avatar--azure {
+  background-color: var(--ams-avatar-azure-background-color);
+  color: var(--ams-avatar-azure-color);
 }
 
 .ams-avatar--green {
@@ -57,24 +49,9 @@
   color: var(--ams-avatar-green-color);
 }
 
-.ams-avatar--grey-1 {
-  background-color: var(--ams-avatar-grey-1-background-color);
-  color: var(--ams-avatar-grey-1-color);
-}
-
-.ams-avatar--grey-2 {
-  background-color: var(--ams-avatar-grey-2-background-color);
-  color: var(--ams-avatar-grey-2-color);
-}
-
-.ams-avatar--grey-3 {
-  background-color: var(--ams-avatar-grey-3-background-color);
-  color: var(--ams-avatar-grey-3-color);
-}
-
-.ams-avatar--light-blue {
-  background-color: var(--ams-avatar-light-blue-background-color);
-  color: var(--ams-avatar-light-blue-color);
+.ams-avatar--lime {
+  background-color: var(--ams-avatar-lime-background-color);
+  color: var(--ams-avatar-lime-color);
 }
 
 .ams-avatar--magenta {
@@ -87,21 +64,6 @@
   color: var(--ams-avatar-orange-color);
 }
 
-.ams-avatar--purple {
-  background-color: var(--ams-avatar-purple-background-color);
-  color: var(--ams-avatar-purple-color);
-}
-
-.ams-avatar--red {
-  background-color: var(--ams-avatar-red-background-color);
-  color: var(--ams-avatar-red-color);
-}
-
-.ams-avatar--white {
-  background-color: var(--ams-avatar-white-background-color);
-  color: var(--ams-avatar-white-color);
-}
-
 .ams-avatar--yellow {
   background-color: var(--ams-avatar-yellow-background-color);
   color: var(--ams-avatar-yellow-color);

package/src/components/badge/README.md

@@ -2,11 +2,12 @@
 
 # Badge
 
-A prominently coloured box containing 1 or 2 words.
-Guides the user in taking a specific action or describes its surrounding content.
+A prominent label that indicates a category, property or instruction.
 
-## Design
+## Guidelines
 
-The badge can contain a short text or a number.
-The default background colour is dark green.
-Suggestions on when to use the other colours will follow soon.
+- Let the badge contain a short text or a number.
+- Use any of the feedback or highlight [colours](/docs/brand-design-tokens-colour--docs) for the background.
+  The default is green.
+  Red, orange and green are especially useful for showing an error, warning, or success.
+  However, they can also be combined with the other colours without carrying these meanings.

package/src/components/badge/badge.scss

@@ -3,53 +3,31 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
 .ams-badge {
+  background-color: var(--ams-badge-background-color);
+  color: var(--ams-badge-color);
   display: inline-block;
   font-family: var(--ams-badge-font-family);
   font-size: var(--ams-badge-font-size);
   font-weight: var(--ams-badge-font-weight);
   line-height: var(--ams-badge-line-height);
   padding-inline: var(--ams-badge-padding-inline);
-}
-
-.ams-badge--black {
-  background-color: var(--ams-badge-black-background-color);
-  color: var(--ams-badge-black-color);
-}
-
-.ams-badge--blue {
-  background-color: var(--ams-badge-blue-background-color);
-  color: var(--ams-badge-blue-color);
-}
-
-.ams-badge--dark-green {
-  background-color: var(--ams-badge-dark-green-background-color);
-  color: var(--ams-badge-dark-green-color);
-}
-
-.ams-badge--green {
-  background-color: var(--ams-badge-green-background-color);
-  color: var(--ams-badge-green-color);
-}
 
-.ams-badge--grey-1 {
-  background-color: var(--ams-badge-grey-1-background-color);
-  color: var(--ams-badge-grey-1-color);
+  @include hyphenation;
+  @include text-rendering;
 }
 
-.ams-badge--grey-2 {
-  background-color: var(--ams-badge-grey-2-background-color);
-  color: var(--ams-badge-grey-2-color);
+.ams-badge--azure {
+  background-color: var(--ams-badge-azure-background-color);
+  color: var(--ams-badge-azure-color);
 }
 
-.ams-badge--grey-3 {
-  background-color: var(--ams-badge-grey-3-background-color);
-  color: var(--ams-badge-grey-3-color);
-}
-
-.ams-badge--light-blue {
-  background-color: var(--ams-badge-light-blue-background-color);
-  color: var(--ams-badge-light-blue-color);
+.ams-badge--lime {
+  background-color: var(--ams-badge-lime-background-color);
+  color: var(--ams-badge-lime-color);
 }
 
 .ams-badge--magenta {
@@ -72,11 +50,6 @@
   color: var(--ams-badge-red-color);
 }
 
-.ams-badge--white {
-  background-color: var(--ams-badge-white-background-color);
-  color: var(--ams-badge-white-color);
-}
-
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);

package/src/components/blockquote/blockquote.scss

@@ -34,6 +34,6 @@
   }
 }
 
-.ams-blockquote--inverse-color {
+.ams-blockquote--inverse {
   color: var(--ams-blockquote-inverse-color);
 }

package/src/components/breadcrumb/breadcrumb.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-ol {
@@ -22,6 +23,7 @@
   break-after: avoid;
   break-inside: avoid;
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-ol;
 }

package/src/components/breakout/breakout.scss

@@ -114,15 +114,15 @@ $ams-breakout-row-span-max: 4;
 
 .ams-breakout__cell--has-spotlight {
   display: grid; /* Stretches the empty Spotlight vertically. */
-  margin-block: calc(var(--ams-space-grid-md) * -1);
-  margin-inline: calc(var(--ams-space-grid-lg) * -1);
+  margin-block: calc(var(--ams-space-xl) * -1);
+  margin-inline: calc(var(--ams-space-2xl) * -1);
 
   .ams-breakout--gap-vertical--small > & {
-    margin-block: calc(var(--ams-space-grid-sm) * -1);
+    margin-block: calc(var(--ams-space-l) * -1);
   }
 
   .ams-breakout--gap-vertical--large > & {
-    margin-block: calc(var(--ams-space-grid-lg) * -1);
+    margin-block: calc(var(--ams-space-2xl) * -1);
   }
 }
 

package/src/components/button/README.md

@@ -9,7 +9,7 @@ Allows the user to perform actions and operate the user interface.
 - Choose a short label that describes the function of the button.
 - Use the correct type of button for the corresponding application, e.g. `type="submit"` for the primary form button.
 - Make sure one can operate a button through a keyboard.
-- Wrap 2 or more consecutive buttons and/or links in an [Action Group](?path=/docs/components-buttons-action-group--docs).
+- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
 - Primary, secondary and tertiary buttons can be used side by side.
   Skipping levels is allowed.
 

package/src/components/button/button.scss

@@ -3,10 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 @mixin reset-button {
-  border: 0;
+  border: none;
   margin-block: 0; // [1]
   margin-inline: 0; // [1]
 
@@ -18,6 +19,7 @@
   display: inline-flex;
   font-family: var(--ams-button-font-family);
   font-size: var(--ams-button-font-size);
+  font-weight: var(--ams-button-font-weight);
   gap: var(--ams-button-gap);
   justify-content: center;
   line-height: var(--ams-button-line-height);
@@ -26,6 +28,7 @@
   padding-inline: var(--ams-button-padding-inline);
   touch-action: manipulation;
 
+  @include hyphenation;
   @include text-rendering;
   @include reset-button;
 

package/src/components/card/card.scss

@@ -7,35 +7,15 @@
   display: grid;
   gap: var(--ams-card-gap);
   outline-offset: var(--ams-card-outline-offset);
-  position: relative;
+  position: relative; // Allows stretching the card link below.
   touch-action: manipulation;
 
-  /* Set native outline on card if card has focus visible within */
+  // Set native outline to Card if it has a visible focus inside.
   &:has(:focus-visible) {
     outline-color: -webkit-focus-ring-color;
     outline-style: auto;
     outline-width: 0.0625rem;
   }
-
-  /*
-    Remove link focus outline only if :has is supported,
-    which means the outline on the whole card is set
-  */
-  &:has(:focus-visible) a:focus {
-    outline: none;
-  }
-
-  /*
-    This trick, together with position: relative on the outer wrapper, makes the whole card clickable.
-    Taken from https://inclusive-components.design/cards/
-  */
-  a::after {
-    content: "";
-    display: block;
-    inset-block: 0;
-    inset-inline: 0;
-    position: absolute;
-  }
 }
 
 .ams-card__heading-group {
@@ -50,8 +30,25 @@
   text-decoration-thickness: var(--ams-card-link-text-decoration-thickness);
   text-underline-offset: var(--ams-card-link-text-underline-offset);
 
+  // Make the whole Card clickable by making the link cover its entire area.
+  // Source: https://inclusive-components.design/cards/
+  &::after {
+    content: "";
+    display: block;
+    inset-block: 0;
+    inset-inline: 0;
+    position: absolute;
+  }
+
   &:hover {
     color: var(--ams-card-link-hover-color);
     text-decoration-line: var(--ams-card-link-hover-text-decoration-line);
   }
+
+  // Remove the outline from the link; it’s already on the Card.
+  // Reuses the `.ams-card:has(:focus-visible)` selector above, so that
+  // browsers that support it apply both styles, while those that don’t apply neither.
+  .ams-card:has(:focus-visible) &:focus {
+    outline: none;
+  }
 }

package/src/components/character-count/character-count.scss

@@ -3,6 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
 .ams-character-count {
@@ -12,6 +13,7 @@
   font-weight: var(--ams-character-count-font-weight);
   line-height: var(--ams-character-count-line-height);
 
+  @include hyphenation;
   @include text-rendering;
 }
 

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/dialog.scss

@@ -5,6 +5,8 @@
 
 @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 +15,21 @@ 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 */
+  /*
+   * 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 +38,18 @@ 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);
 }
 
 .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);
+}
+
+.ams-dialog__footer {
+  padding-block: var(--ams-dialog-footer-padding-block);
+  padding-inline: var(--ams-dialog-footer-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;
 }