@amsterdam/design-system-css 0.1.7 → 0.1.9

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.7",
+  "version": "0.1.9",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -19,11 +19,11 @@
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@amsterdam/design-system-tokens": "0.1.6",
-    "sass": "1.68.0"
+    "@amsterdam/design-system-tokens": "0.1.8",
+    "sass": "1.69.5"
   },
   "dependencies": {
-    "@utrecht/components": "1.0.0-alpha.553"
+    "@utrecht/components": "2.0.0"
   },
-  "gitHead": "936054ca8c9f8f685c9a9bda9db3157608817886"
+  "gitHead": "930baf5f841a4a368c75a7e72e96838ce3f09c79"
 }

package/src/accordion/README.md

@@ -14,7 +14,7 @@ Het accordion component is een klikbare (verticaal gestapelde) lijst van koppen
 Je kunt door een accordion navigeren met je toetsenbord:
 
 | key                  | element                                                                                                                      |
-| -------------------- | ---------------------------------------------------------------------------------------------------------------------------- |
+| :------------------- | :--------------------------------------------------------------------------------------------------------------------------- |
 | Enter of Space       | Open of sluit de accordionsectie die de focus heeft                                                                          |
 | Tab                  | Ga naar het volgende element dat focus kan hebben                                                                            |
 | Shift + Tab          | Ga naar het volgende element dat focus kan hebben                                                                            |

package/src/accordion/accordion.scss

@@ -30,7 +30,7 @@
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-accordion-button-wide-font-size);
   }
 

package/src/alert/alert.scss

@@ -34,7 +34,7 @@
   font-weight: var(--amsterdam-alert-title-font-weight);
   line-height: var(--amsterdam-alert-title-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-alert-title-wide-font-size);
   }
 

package/src/aspect-ratio/README.md

@@ -4,13 +4,14 @@ Aspect Ratio (in het Nederlands: beeldverhouding) koppelt de hoogte van een elem
 
 Om de vormgeving consistent te houden gebruiken we een vaste set verhoudingen (breedte:hoogte):
 
-| _keyword_    | verhouding |
-| ------------ | ---------- |
-| `extra-wide` | 16:9       |
-| `wide`       | 5:4        |
-| `square`     | 1:1        |
-| `tall`       | 4:5        |
-| `extra-tall` | 9:16       |
+| _keyword_ | verhouding |
+| :-------- | ---------: |
+| `2x-wide` |       32:9 |
+| `x-wide`  |       16:9 |
+| `wide`    |        5:4 |
+| `square`  |        1:1 |
+| `tall`    |        4:5 |
+| `x-tall`  |       9:16 |
 
 ## Richtlijnen
 

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

@@ -8,8 +8,8 @@
   position: relative;
 }
 
-.amsterdam-aspect-ratio--extra-tall {
-  aspect-ratio: var(--amsterdam-aspect-ratio-extra-tall);
+.amsterdam-aspect-ratio--x-tall {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-tall);
 }
 
 .amsterdam-aspect-ratio--tall {
@@ -24,6 +24,10 @@
   aspect-ratio: var(--amsterdam-aspect-ratio-wide);
 }
 
-.amsterdam-aspect-ratio--extra-wide {
-  aspect-ratio: var(--amsterdam-aspect-ratio-extra-wide);
+.amsterdam-aspect-ratio--x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-x-wide);
+}
+
+.amsterdam-aspect-ratio--2x-wide {
+  aspect-ratio: var(--amsterdam-aspect-ratio-2x-wide);
 }

package/src/blockquote/blockquote.scss

@@ -29,7 +29,7 @@
     content: close-quote;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-blockquote-wide-font-size);
   }
 

package/src/breadcrumb/breadcrumb.scss

@@ -15,9 +15,10 @@
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
   font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  font-weight: var(--amsterdam-breadcrumb-font-weight);
   line-height: var(--amsterdam-breadcrumb-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-breadcrumb-wide-font-size);
   }
 }
@@ -58,9 +59,7 @@
     text-transform: capitalize;
   }
 
-  &:focus,
-  &:hover,
-  &:active {
+  &:hover {
     color: var(--amsterdam-breadcrumb-item-link-hover-color);
     text-decoration: underline;
     text-decoration-thickness: 2px;

package/src/button/button.scss

@@ -13,7 +13,7 @@
 .amsterdam-button {
   font-size: var(--amsterdam-button-narrow-font-size);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-button-wide-font-size);
   }
 
@@ -33,16 +33,7 @@
   }
 }
 
-// Specificity hack to be able to style secondary button focus state
-// This isn't currently possible with the Utrecht component
-// We should really pull this component in our own repo...
-.amsterdam-button--secondary.amsterdam-button--secondary {
-  &:focus {
-    color: var(--amsterdam-button-secondary-focus-color);
-  }
-}
-
-.amsterdam-button--secondary:focus:not(:disabled, [aria-disabled="true"]) {
+.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
   box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
 }
 
@@ -52,6 +43,6 @@
   }
 }
 
-.amsterdam-button--tertiary:focus:not(:disabled, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-tertiary-focus-box-shadow);
+.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
+  box-shadow: none;
 }

package/src/card/README.md

@@ -0,0 +1,12 @@
+# Card
+
+Gebruik een card op een overzichtspagina om te verwijzen naar een detailpagina, zoals een nieuwsbericht, een vacature of een zoekresultaat. De card bevat meestal de titel, introductie en afbeelding van de content. De link is verplicht.
+
+## Schermlezers
+
+Met een schermlezer kun je onder andere navigeren via headings en links in een document. De titel van een card is een link in een heading, zodat je van beide navigatiemanieren gebruik kunt maken. Een schermlezer leest eerst de titel op, daarna de rest van de inhoud.
+
+## Richtlijnen
+
+- De titel van een card is een link in een heading. Hier gelden dezelfde richtlijnen voor als voor reguliere [links](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) en [headings](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+- Een card heeft meer inhoud nodig dan alleen een titel. Vul dit aan met tekstuele en/of visuele inhoud. Als dit lastig is, kijk dan of een [top task link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-top-task-link--docs) of [reguliere link](https://amsterdam.github.io/design-system/?path=/docs/react_navigation-link--docs) beter past.

package/src/card/card.scss

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-card {
+  display: grid;
+  gap: 0.5rem;
+  outline-offset: var(--amsterdam-card-outline-offset);
+  position: relative;
+  touch-action: manipulation;
+
+  /* Set native outline on card if card has focus visible within */
+  &:has(:focus-visible) {
+    outline-color: -webkit-focus-ring-color;
+    outline-style: auto;
+    outline-width: 1px;
+  }
+
+  /*
+    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: 0;
+    position: absolute;
+  }
+}
+
+.amsterdam-card__heading-group {
+  display: flex;
+  flex-direction: column-reverse;
+  gap: 0.5rem;
+}
+
+.amsterdam-card__link {
+  color: var(--amsterdam-card-link-color);
+  text-decoration: none;
+  text-decoration-thickness: 2px;
+  text-underline-offset: 3px;
+
+  &:hover {
+    color: var(--amsterdam-card-link-hover-color);
+    text-decoration: underline;
+  }
+}

package/src/checkbox/README.md

@@ -24,4 +24,4 @@ Een label:
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): het is zowel voor een gebruiker als programmatisch duidelijk wat het doel van een formulierveld is.
 
-<!-- TODO: Checkbox is an interactive element, reference the general interactive elements docs when they're merged -->
+Checkbox is een interactief element, hier gelden [de algemene eisen en richtlijnen voor interactieve elementen](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) voor.

package/src/checkbox/checkbox.scss

@@ -34,7 +34,7 @@
     width: 100%;
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
   }
 }
@@ -65,7 +65,7 @@
     }
   }
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-checkbox-wide-font-size);
   }
 

package/src/dialog/README.md

@@ -0,0 +1,23 @@
+# 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.
+
+## Guidelines
+
+- Use Dialog sparingly, because it interrupts the user's workflow.
+- Use Dialog for short and non-frequent tasks. For common tasks consider using the main flow.
+
+## Keyboard Support
+
+| key         | function                                                     |
+| :---------- | :----------------------------------------------------------- |
+| Tab         | Moves focus to next focusable element inside the dialog.     |
+| Shift + Tab | Moves focus to previous focusable element inside the dialog. |
+| Escape      | Closes the dialog.                                           |
+
+## References
+
+- [HTMLDialogElement](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement)
+- [Return value](https://developer.mozilla.org/en-US/docs/Web/API/HTMLDialogElement/returnValue)
+- [Modal & Nonmodal Dialogs: When (& When Not) to Use Them](https://www.nngroup.com/articles/modal-nonmodal-dialog/)
+- [Patterns](https://www.w3.org/WAI/ARIA/apg/patterns/dialog-modal/)

package/src/dialog/dialog.scss

@@ -0,0 +1,92 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-dialog {
+  background-color: var(--amsterdam-dialog-background-color);
+  border: var(--amsterdam-dialog-border);
+  inset: 0;
+  max-inline-size: var(--amsterdam-dialog-max-inline-size);
+  padding-block: 0;
+  padding-inline: 0;
+  position: fixed;
+
+  /* no token because dialog does not inherit from any element */
+  &::backdrop {
+    background: #0006;
+  }
+}
+
+.amsterdam-dialog__form {
+  display: grid;
+  gap: var(--amsterdam-dialog-form-gap);
+  grid-template-rows: auto 1fr auto;
+  max-block-size: var(--amsterdam-dialog-form-max-block-size);
+  padding-block: var(--amsterdam-dialog-form-padding-block);
+  padding-inline: var(--amsterdam-dialog-form-padding-inline);
+}
+
+.amsterdam-dialog__article {
+  display: grid;
+  gap: 1.5rem; /* Until we have a consistent way of spacing text elements */
+  max-block-size: 100%; /* safari */
+  overflow-y: auto;
+  overscroll-behavior-y: contain;
+  padding-inline-end: var(--amsterdam-dialog-article-padding-inline-end);
+}
+
+.amsterdam-dialog__header {
+  align-items: flex-start;
+  display: flex;
+  gap: var(--amsterdam-dialog-header-gap);
+}
+
+@mixin reset {
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-dialog__title {
+  color: var(--amsterdam-dialog-title-color);
+  flex: auto;
+  font-family: var(--amsterdam-dialog-title-font-family);
+  font-size: var(--amsterdam-dialog-title-narrow-font-size);
+  font-weight: var(--amsterdam-dialog-title-font-weight);
+  line-height: var(--amsterdam-dialog-title-line-height);
+
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
+    font-size: var(--amsterdam-dialog-title-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.amsterdam-dialog__footer {
+  display: flex;
+  flex-direction: column;
+  grid-gap: var(--amsterdam-dialog-footer-gap);
+  padding-block: var(--amsterdam-dialog-footer-padding-block);
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    flex-direction: row;
+    justify-content: end;
+  }
+}
+
+.amsterdam-dialog__close {
+  background-color: var(--amsterdam-dialog-close-background-color);
+  border: 0;
+  cursor: pointer;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-dialog__close svg {
+  fill: var(--amsterdam-dialog-close-fill);
+}
+
+.amsterdam-dialog__close:hover svg {
+  fill: var(--amsterdam-dialog-close-hover-fill);
+}

package/src/form-label/form-label.scss

@@ -16,7 +16,7 @@
   font-weight: var(--amsterdam-form-label-font-weight);
   line-height: var(--amsterdam-form-label-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-form-label-wide-font-size);
   }
 

package/src/grid/README.grid-cell.md

@@ -0,0 +1,14 @@
+# Grid cell
+
+Beslaat een aantal kolommen in een [Grid](?path=/docs/react_layout-grid--docs).
+
+## Gebruik
+
+Verdeel hiermee een grid in cellen.
+Geef aan hoeveel kolommen van het grid de cel beslaat.
+Dat aantal kan variëren voor smalle, middelbrede of brede schermen.
+In elke cel plaats je vervolgens de gewenste inhoud.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/README.grid.md

@@ -0,0 +1,17 @@
+# Grid
+
+Levert een tweedimensionaal raster waarop alle elementen van een pagina uitgelijnd worden.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout, dus direct binnen [Screen](?path=/docs/layout-screen--docs).
+
+Een [Footer](?path=/docs/react_containers-footer--docs) en een [Highlight](?path=/docs/react_containers-highlight--docs) zijn iets breder dan het grid.
+Daarom wordt in HTML vóór deze componenten een instantie van Grid afgesloten en erbinnen een nieuwe geopend.
+
+Meerdere instanties van dit component zijn dus mogelijk op een pagina.
+Visueel moeten ze wel allemaal op elkaar aansluiten.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/grid/grid-cell.scss

@@ -5,14 +5,42 @@
 
 @import "../../utils/breakpoint";
 
-@media screen and (width > $amsterdam-breakpoint) {
+.amsterdam-grid-cell--full-width {
+  grid-column: 1 / -1;
+}
+
+// The order of the following declaration blocks ensures the intended specificity.
+
+@for $i from 1 through 12 {
+  .amsterdam-grid-cell--span-#{$i} {
+    grid-column-end: span $i;
+  }
+
+  .amsterdam-grid-cell--start-#{$i} {
+    grid-column-start: $i;
+  }
+}
+
+@media screen and (min-width: $amsterdam-breakpoint-medium) {
   @for $i from 1 through 12 {
-    .amsterdam-grid-column-start-#{$i} {
+    .amsterdam-grid-cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid-cell--start-#{$i}-medium {
       grid-column-start: $i;
     }
+  }
+}
 
-    .amsterdam-grid-column-span-#{$i} {
+@media screen and (min-width: $amsterdam-breakpoint-wide) {
+  @for $i from 1 through 12 {
+    .amsterdam-grid-cell--span-#{$i}-wide {
       grid-column-end: span $i;
     }
+
+    .amsterdam-grid-cell--start-#{$i}-wide {
+      grid-column-start: $i;
+    }
   }
 }

package/src/grid/grid.scss

@@ -0,0 +1,65 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-grid {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+
+  display: grid;
+  gap: var(--amsterdam-grid-gap);
+  grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
+  padding-inline: var(--amsterdam-grid-padding-inline);
+
+  @media screen and (min-width: $amsterdam-breakpoint-medium) {
+    grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
+  }
+
+  @media screen and (min-width: $amsterdam-breakpoint-wide) {
+    grid-template-columns: repeat(var(--amsterdam-grid-wide-column-count), 1fr);
+  }
+}
+
+.amsterdam-grid--density-high {
+  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+}
+
+.amsterdam-grid--padding-bottom--small {
+  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-bottom--medium {
+  padding-block-end: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-bottom--large {
+  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--padding-top--small {
+  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-top--medium {
+  padding-block-start: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-top--large {
+  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+}
+
+.amsterdam-grid--padding-vertical--small {
+  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--padding-vertical--medium {
+  padding-block: var(--amsterdam-grid-gap);
+}
+
+.amsterdam-grid--padding-vertical--large {
+  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+}

package/src/heading/heading.scss

@@ -25,7 +25,7 @@
   font-size: var(--amsterdam-heading-1-narrow-font-size);
   line-height: var(--amsterdam-heading-1-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-1-wide-font-size);
   }
 }
@@ -34,7 +34,7 @@
   font-size: var(--amsterdam-heading-2-narrow-font-size);
   line-height: var(--amsterdam-heading-2-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-2-wide-font-size);
   }
 }
@@ -43,7 +43,7 @@
   font-size: var(--amsterdam-heading-3-narrow-font-size);
   line-height: var(--amsterdam-heading-3-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-3-wide-font-size);
   }
 }
@@ -52,7 +52,7 @@
   font-size: var(--amsterdam-heading-4-narrow-font-size);
   line-height: var(--amsterdam-heading-4-line-height);
 
-  @media screen and (width > $amsterdam-breakpoint) {
+  @media screen and (min-width: $amsterdam-breakpoint-typography) {
     font-size: var(--amsterdam-heading-4-wide-font-size);
   }
 }

package/src/highlight/README.md

@@ -0,0 +1,15 @@
+# Highlight
+
+Benadrukt een sectie op een pagina middels een opvallende achtergrondkleur.
+
+## Richtlijnen
+
+Raadpleeg [dit overzicht op Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) om na te gaan of je zwarte of witte tekst kunt gebruiken op de achtergrondkleur van je keuze.
+
+## Relevante WCAG eisen
+
+- [WCAG 1.4.3](https://www.w3.org/TR/WCAG21/#contrast-minimum): Large-scale text and images of large-scale text have a contrast ratio of at least 3:1;
+
+## Referenties
+
+- [Color and contrast accessibility](https://web.dev/articles/color-and-contrast-accessibility)

package/src/highlight/highlight.scss

@@ -0,0 +1,36 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-highlight--blue {
+  background-color: var(--amsterdam-highlight-blue-background-color);
+}
+
+.amsterdam-highlight--dark-green {
+  background-color: var(--amsterdam-highlight-dark-green-background-color);
+}
+
+.amsterdam-highlight--green {
+  background-color: var(--amsterdam-highlight-green-background-color);
+}
+
+.amsterdam-highlight--light-blue {
+  background-color: var(--amsterdam-highlight-light-blue-background-color);
+}
+
+.amsterdam-highlight--magenta {
+  background-color: var(--amsterdam-highlight-magenta-background-color);
+}
+
+.amsterdam-highlight--orange {
+  background-color: var(--amsterdam-highlight-orange-background-color);
+}
+
+.amsterdam-highlight--purple {
+  background-color: var(--amsterdam-highlight-purple-background-color);
+}
+
+.amsterdam-highlight--yellow {
+  background-color: var(--amsterdam-highlight-yellow-background-color);
+}