@amsterdam/design-system-css 0.14.1 → 0.16.0

package/src/components/alert/alert.scss

@@ -4,16 +4,21 @@
  */
 
 .ams-alert {
-  align-items: flex-start;
   background-color: var(--ams-alert-background-color);
-  border-style: var(--ams-alert-border-style);
-  border-width: var(--ams-alert-border-width);
+  box-shadow: var(--ams-alert-box-shadow);
   display: flex;
-  flex-direction: row;
-  gap: var(--ams-alert-gap);
-  justify-content: space-between;
-  padding-block: var(--ams-alert-padding-block);
-  padding-inline: var(--ams-alert-padding-inline);
+
+  @media (forced-colors: active) {
+    border-style: solid;
+    border-width: var(--ams-alert-forced-colors-border-width);
+  }
+}
+
+.ams-alert__severity-indicator {
+  background-color: var(--ams-alert-severity-indicator-background-color);
+  flex: none;
+  padding-block: var(--ams-alert-severity-indicator-padding-block);
+  padding-inline: var(--ams-alert-severity-indicator-padding-inline);
 }
 
 .ams-alert__content {
@@ -21,20 +26,30 @@
   flex: auto;
   flex-direction: column;
   gap: var(--ams-alert-content-gap);
+  padding-block: var(--ams-alert-content-padding-block);
+  padding-inline: var(--ams-alert-content-padding-inline);
 }
 
 .ams-alert--error {
-  border-color: var(--ams-alert-error-border-color);
-}
+  box-shadow: var(--ams-alert-error-box-shadow);
 
-.ams-alert--info {
-  border-color: var(--ams-alert-info-border-color);
+  > .ams-alert__severity-indicator {
+    background-color: var(--ams-alert-error-severity-indicator-background-color);
+  }
 }
 
 .ams-alert--success {
-  border-color: var(--ams-alert-success-border-color);
+  box-shadow: var(--ams-alert-success-box-shadow);
+
+  > .ams-alert__severity-indicator {
+    background-color: var(--ams-alert-success-severity-indicator-background-color);
+  }
 }
 
 .ams-alert--warning {
-  border-color: var(--ams-alert-warning-border-color);
+  box-shadow: var(--ams-alert-warning-box-shadow);
+
+  > .ams-alert__severity-indicator {
+    background-color: var(--ams-alert-warning-severity-indicator-background-color);
+  }
 }

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

@@ -19,52 +19,52 @@ $ams-breakout-row-span-max: 4;
   @include ams-grid--gap-vertical--none;
 }
 
-.ams-breakout--gap-vertical--small {
-  @include ams-grid--gap-vertical--small;
-}
-
 .ams-breakout--gap-vertical--large {
   @include ams-grid--gap-vertical--large;
 }
 
-// Grid padding
-
-.ams-breakout--padding-bottom--small {
-  @include ams-grid--padding-bottom--small;
+.ams-breakout--gap-vertical--2x-large {
+  @include ams-grid--gap-vertical--2x-large;
 }
 
-.ams-breakout--padding-bottom--medium {
-  @include ams-grid--padding-bottom--medium;
-}
+// Grid padding
 
 .ams-breakout--padding-bottom--large {
   @include ams-grid--padding-bottom--large;
 }
 
-.ams-breakout--padding-top--small {
-  @include ams-grid--padding-top--small;
+.ams-breakout--padding-bottom--x-large {
+  @include ams-grid--padding-bottom--x-large;
 }
 
-.ams-breakout--padding-top--medium {
-  @include ams-grid--padding-top--medium;
+.ams-breakout--padding-bottom--2x-large {
+  @include ams-grid--padding-bottom--2x-large;
 }
 
 .ams-breakout--padding-top--large {
   @include ams-grid--padding-top--large;
 }
 
-.ams-breakout--padding-vertical--small {
-  @include ams-grid--padding-vertical--small;
+.ams-breakout--padding-top--x-large {
+  @include ams-grid--padding-top--x-large;
 }
 
-.ams-breakout--padding-vertical--medium {
-  @include ams-grid--padding-vertical--medium;
+.ams-breakout--padding-top--2x-large {
+  @include ams-grid--padding-top--2x-large;
 }
 
 .ams-breakout--padding-vertical--large {
   @include ams-grid--padding-vertical--large;
 }
 
+.ams-breakout--padding-vertical--x-large {
+  @include ams-grid--padding-vertical--x-large;
+}
+
+.ams-breakout--padding-vertical--2x-large {
+  @include ams-grid--padding-vertical--2x-large;
+}
+
 // Column span
 // The order of these declaration blocks ensures the intended specificity.
 
@@ -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/README.md

@@ -2,27 +2,28 @@
 
 # Card
 
-Use a card on an overview page to link to an article page, such as a news article, a job vacancy, or a search result.
-The card typically includes the title, introduction, and an image of the content.
-The link is mandatory.
+A brief section of a heading, some text, and optionally an image, that leads to a related page.
 
 ## Guidelines
 
-- The title of a card is a link within a heading.
-  The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here.
-  The link is active across the entire area of the card.
+- The mandatory title of a card is a link within a Heading.
+  The guidelines for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply.
+  The link is made active across the entire area of the card.
 - A card needs more content than just a title.
-  Supplement this with textual and/or visual content.
-- Place the text in a regular paragraph.
-  Only use the smallest text size for a tagline or date.
-- This component may not be the best option if the content does not represent a detailed page.
-  For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
-  You can also use a [regular link](/docs/components-navigation-link--docs).
+  Add a short text and optionally an image and metadata.
+- Use the Card Heading, Card Heading Group and Card Image subcomponents.
+  They apply the correct spacing.
+- Card Heading requires a `level`, because there is no sensible default.
+  Its visual size of `heading-4` can be overridden.
+- Place the text in a regular [Paragraph](/docs/components-text-paragraph--docs).
+  Use a small Paragraph for a publication date.
+- This component is not the best option if the target content does not represent an article-like page.
+  In that case, use a Heading, a Paragraph and a [Standalone Link](/docs/components-navigation-standalone-link--docs) instead.
 
 ### Screen readers
 
-With a screen reader, you can navigate using headings and links in a document.
-The title of a card is a link within a heading, allowing you to utilize both navigation methods.
+Screen reader users may navigate a page using headings and links.
+A Card works well in both approaches as its title carries a link.
 A screen reader reads the title first, followed by the rest of the content.
 
 ### Using links with routing libraries

package/src/components/card/card.scss

@@ -5,36 +5,23 @@
 
 .ams-card {
   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;
+  > .ams-card__heading:has(+ *) {
+    margin-block-end: var(--ams-card-heading-margin-block-end);
   }
 
-  /*
-    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__image:has(+ *) {
+    margin-block-end: var(--ams-card-image-margin-block-end);
   }
 }
 
@@ -42,6 +29,7 @@
   display: flex;
   flex-direction: column-reverse;
   gap: var(--ams-card-heading-group-gap);
+  margin-block-end: var(--ams-card-heading-group-margin-block-end);
 }
 
 .ams-card__link {
@@ -50,8 +38,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;
 }