@amsterdam/design-system-css 0.1.9 → 0.3.0

package/dist/spotlight/spotlight.css

@@ -0,0 +1 @@
+.amsterdam-spotlight--blue{background-color:var(--amsterdam-spotlight-blue-background-color)}.amsterdam-spotlight--dark-green{background-color:var(--amsterdam-spotlight-dark-green-background-color)}.amsterdam-spotlight--green{background-color:var(--amsterdam-spotlight-green-background-color)}.amsterdam-spotlight--light-blue{background-color:var(--amsterdam-spotlight-light-blue-background-color)}.amsterdam-spotlight--magenta{background-color:var(--amsterdam-spotlight-magenta-background-color)}.amsterdam-spotlight--orange{background-color:var(--amsterdam-spotlight-orange-background-color)}.amsterdam-spotlight--purple{background-color:var(--amsterdam-spotlight-purple-background-color)}.amsterdam-spotlight--yellow{background-color:var(--amsterdam-spotlight-yellow-background-color)}/*# sourceMappingURL=spotlight.css.map */

package/dist/spotlight/spotlight.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/spotlight/spotlight.scss"],"names":[],"mappings":"AAKA,2BACE,kEAGF,iCACE,wEAGF,4BACE,mEAGF,iCACE,wEAGF,8BACE,qEAGF,6BACE,oEAGF,6BACE,oEAGF,6BACE","file":"spotlight.css"}

package/dist/switch/switch.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/switch/switch.scss"],"names":[],"mappings":"AAIA,yBACE,gBACA,eACA,gBACA,WAGF,yBACE,0DACA,0DACA,eACA,qBACA,kBACA,mBACA,4CACA,oCAlBA,sBAuBF,iCACE,gEACA,kBACA,WACA,cACA,4CACA,wBACA,yCACA,uCACA,0CAGF,0DACE,kEAGF,2DACE,mEACA,mBAGF,gEACE,uCACA,sDACA,mBAGF,kEAEE,qGAGF,0FACE","file":"switch.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/switch/switch.scss"],"names":[],"mappings":"AAIA,yBACE,gBACA,eACA,gBACA,WAGF,yBACE,0DACA,0DACA,eACA,qBACA,kBACA,mBACA,4CACA,oCAlBA,sBAuBF,iCACE,gEACA,kBACA,WACA,cACA,4CACA,wBACA,yCACA,uCACA,0CAGF,0DACE,kEAGF,2DACE,mEACA,mBAGF,gEACE,uCACA,sDACA,mBAGF,kEAEE,qGAGF,0FACE","file":"switch.css"}

package/dist/text-input/text-input.css

@@ -0,0 +1 @@
+.amsterdam-text-input{border:none;box-shadow:var(--amsterdam-text-input-box-shadow);color:var(--amsterdam-text-input-color);font-family:var(--amsterdam-text-input-font-family);font-size:var(--amsterdam-text-input-spacious-font-size);font-weight:var(--amsterdam-text-input-font-weight);line-height:var(--amsterdam-text-input-spacious-line-height);outline-offset:var(--amsterdam-text-input-outline-offset);padding-block:.5rem;padding-inline:1rem;touch-action:manipulation;width:100%;box-sizing:border-box;margin-block:0;-webkit-text-size-adjust:100%}.amsterdam-theme--compact .amsterdam-text-input{font-size:var(--amsterdam-text-input-compact-font-size);line-height:var(--amsterdam-text-input-compact-line-height)}.amsterdam-text-input:hover{box-shadow:var(--amsterdam-text-input-hover-box-shadow)}.amsterdam-text-input::placeholder{color:var(--amsterdam-text-input-placeholder-color)}.amsterdam-text-input:disabled{background-color:var(--amsterdam-text-input-disabled-background-color);box-shadow:var(--amsterdam-text-input-disabled-box-shadow);color:var(--amsterdam-text-input-disabled-color);cursor:not-allowed}.amsterdam-text-input:invalid,.amsterdam-text-input[aria-invalid=true]{box-shadow:var(--amsterdam-text-input-invalid-box-shadow)}.amsterdam-text-input:invalid:hover,.amsterdam-text-input[aria-invalid=true]:hover{box-shadow:var(--amsterdam-text-input-invalid-hover-box-shadow)}/*# sourceMappingURL=text-input.css.map */

package/dist/text-input/text-input.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/components/text-input/text-input.scss"],"names":[],"mappings":"AAWA,sBACE,YACA,kDACA,wCACA,oDACA,yDACA,oDACA,6DACA,0DACA,oBACA,oBACA,0BACA,WAjBA,sBACA,eACA,8BAmBA,gDACE,wDACA,4DAGF,4BACE,wDAIJ,mCACE,oDAGF,+BACE,uEACA,2DACA,iDACA,mBAGF,uEAEE,0DAEA,mFAEE","file":"text-input.css"}

package/dist/top-task-link/top-task-link.css

@@ -1 +1 @@
-.amsterdam-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--amsterdam-top-task-link-outline-offset);text-decoration:none}.amsterdam-top-task-link__label{color:var(--amsterdam-top-task-link-label-color);font-family:var(--amsterdam-top-task-link-label-font-family);font-size:var(--amsterdam-top-task-link-label-narrow-font-size);font-weight:var(--amsterdam-top-task-link-label-font-weight);line-height:var(--amsterdam-top-task-link-label-line-height);box-sizing:border-box;-webkit-text-size-adjust:100%}@media screen and (min-width: 53.375rem){.amsterdam-top-task-link__label{font-size:var(--amsterdam-top-task-link-label-wide-font-size)}}.amsterdam-top-task-link:hover .amsterdam-top-task-link__label{color:var(--amsterdam-top-task-link-label-hover-color);text-decoration:underline;text-decoration-thickness:3px;text-underline-offset:.5rem}.amsterdam-top-task-link__description{color:var(--amsterdam-top-task-link-description-color);font-family:var(--amsterdam-top-task-link-description-font-family);font-size:var(--amsterdam-top-task-link-description-narrow-font-size);font-weight:var(--amsterdam-top-task-link-description-font-weight);line-height:var(--amsterdam-top-task-link-description-line-height);box-sizing:border-box;-webkit-text-size-adjust:100%}@media screen and (min-width: 53.375rem){.amsterdam-top-task-link__description{font-size:var(--amsterdam-top-task-link-description-wide-font-size)}}/*# sourceMappingURL=top-task-link.css.map */
+.amsterdam-top-task-link{break-inside:avoid;display:flex;flex-direction:column;gap:.5rem;outline-offset:var(--amsterdam-top-task-link-outline-offset);text-decoration:none}.amsterdam-top-task-link__label{color:var(--amsterdam-top-task-link-label-color);font-family:var(--amsterdam-top-task-link-label-font-family);font-size:var(--amsterdam-top-task-link-label-spacious-font-size);font-weight:var(--amsterdam-top-task-link-label-font-weight);line-height:var(--amsterdam-top-task-link-label-line-height);text-decoration-line:var(--amsterdam-top-task-link-label-text-decoration-line);text-decoration-thickness:var(--amsterdam-top-task-link-label-text-decoration-thickness);text-underline-offset:var(--amsterdam-top-task-link-label-text-underline-offset);box-sizing:border-box;-webkit-text-size-adjust:100%}.amsterdam-theme--compact .amsterdam-top-task-link__label{font-size:var(--amsterdam-top-task-link-label-compact-font-size);line-height:var(--amsterdam-top-task-link-label-compact-line-height)}.amsterdam-top-task-link:hover .amsterdam-top-task-link__label{color:var(--amsterdam-top-task-link-label-hover-color);text-decoration-line:var(--amsterdam-top-task-link-label-hover-text-decoration-line)}.amsterdam-top-task-link__description{color:var(--amsterdam-top-task-link-description-color);font-family:var(--amsterdam-top-task-link-description-font-family);font-size:var(--amsterdam-top-task-link-description-spacious-font-size);font-weight:var(--amsterdam-top-task-link-description-font-weight);line-height:var(--amsterdam-top-task-link-description-spacious-line-height);box-sizing:border-box;-webkit-text-size-adjust:100%}.amsterdam-theme--compact .amsterdam-top-task-link__description{font-size:var(--amsterdam-top-task-link-description-compact-font-size);line-height:var(--amsterdam-top-task-link-description-compact-line-height)}/*# sourceMappingURL=top-task-link.css.map */

package/dist/top-task-link/top-task-link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/top-task-link/top-task-link.scss"],"names":[],"mappings":"AAOA,yBACE,mBACA,aACA,sBACA,UACA,6DACA,qBAQF,gCACE,iDACA,6DACA,gEACA,6DACA,6DATA,sBACA,8BAUA,yCAPF,gCAQI,+DAMJ,+DACE,uDACA,0BACA,8BACA,4BAGF,sCACE,uDACA,mEACA,sEACA,mEACA,mEA9BA,sBACA,8BA+BA,yCAPF,sCAQI","file":"top-task-link.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/top-task-link/top-task-link.scss"],"names":[],"mappings":"AAKA,yBACE,mBACA,aACA,sBACA,UACA,6DACA,qBAQF,gCACE,iDACA,6DACA,kEACA,6DACA,6DACA,+EACA,yFACA,iFAZA,sBACA,8BAaA,0DACE,iEACA,qEAMJ,+DACE,uDACA,qFAGF,sCACE,uDACA,mEACA,wEACA,mEACA,4EAhCA,sBACA,8BAiCA,gEACE,uEACA","file":"top-task-link.css"}

package/dist/unordered-list/unordered-list.css

@@ -1 +1 @@
-.amsterdam-unordered-list{box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0;-webkit-text-size-adjust:100%;display:grid;gap:var(--amsterdam-unordered-list-gap)}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers){color:var(--amsterdam-unordered-list-color);font-family:var(--amsterdam-unordered-list-font-family);font-size:var(--amsterdam-unordered-list-narrow-font-size);font-weight:var(--amsterdam-unordered-list-font-weight);line-height:var(--amsterdam-unordered-list-line-height);list-style-type:var(--amsterdam-unordered-list-list-style-type)}@media screen and (min-width: 53.375rem){.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers){font-size:var(--amsterdam-unordered-list-wide-font-size)}}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) .amsterdam-unordered-list__item{margin-inline-start:var(--amsterdam-unordered-list-item-margin-inline-start);padding-inline-start:var(--amsterdam-unordered-list-item-padding-inline-start)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list{list-style-type:var(--amsterdam-unordered-list-unordered-list-list-style-type)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list .amsterdam-unordered-list__item{margin-inline-start:var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start)}/*# sourceMappingURL=unordered-list.css.map */
+.amsterdam-unordered-list{box-sizing:border-box;list-style:none;margin-block:0;padding-inline-start:0;-webkit-text-size-adjust:100%;display:grid;gap:var(--amsterdam-unordered-list-gap)}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers){color:var(--amsterdam-unordered-list-color);font-family:var(--amsterdam-unordered-list-font-family);font-size:var(--amsterdam-unordered-list-spacious-font-size);font-weight:var(--amsterdam-unordered-list-font-weight);line-height:var(--amsterdam-unordered-list-spacious-line-height);list-style-type:var(--amsterdam-unordered-list-list-style-type)}.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) .amsterdam-unordered-list__item{margin-inline-start:var(--amsterdam-unordered-list-item-margin-inline-start);padding-inline-start:var(--amsterdam-unordered-list-item-padding-inline-start)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list{list-style-type:var(--amsterdam-unordered-list-unordered-list-list-style-type)}:is(.amsterdam-ordered-list,.amsterdam-unordered-list) .amsterdam-unordered-list .amsterdam-unordered-list__item{margin-inline-start:var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);padding-inline-start:var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start)}.amsterdam-theme--compact .amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers){font-size:var(--amsterdam-unordered-list-compact-font-size);line-height:var(--amsterdam-unordered-list-compact-line-height)}/*# sourceMappingURL=unordered-list.css.map */

package/dist/unordered-list/unordered-list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAiBA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,2DACA,wDACA,wDACA,gEAEA,yCARF,qEASI,0DAIF,qGACE,6EACA,+EAKJ,iFACE,+EAEA,iHACE,4FACA","file":"unordered-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,6DACA,wDACA,iEACA,gEAGA,qGACE,6EACA,+EAKJ,iFACE,+EAEA,iHACE,4FACA,8FAIJ,+FACE,4DACA","file":"unordered-list.css"}

package/dist/visually-hidden/visually-hidden.css

@@ -1 +1 @@
-.amsterdam-visually-hidden{clip:rect(1px, 1px, 1px, 1px);clip-path:inset(50%);height:1px;margin-block:-1px;margin-inline:-1px;overflow:hidden;padding-block:0;padding-inline:0;position:absolute;width:1px}/*# sourceMappingURL=visually-hidden.css.map */
+.amsterdam-visually-hidden:not(:active,:focus){clip:rect(0 0 0 0);clip-path:inset(50%);height:1px;overflow:hidden;position:absolute;white-space:nowrap;width:1px}/*# sourceMappingURL=visually-hidden.css.map */

package/dist/visually-hidden/visually-hidden.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAKA,2BACE,8BACA,qBACA,WACA,kBACA,mBACA,gBACA,gBACA,iBACA,kBACA","file":"visually-hidden.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAMA,+CACE,mBACA,qBACA,WACA,gBACA,kBACA,mBACA","file":"visually-hidden.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.9",
+  "version": "0.3.0",
   "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",
@@ -14,16 +14,16 @@
     "directory": "packages/css"
   },
   "scripts": {
-    "build": "sass src/:dist/ --style=compressed",
-    "build:watch": "sass src/:dist/ --watch",
+    "build": "sass src/components:dist/ --style=compressed",
+    "build:watch": "sass src/components:dist/ --watch",
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@amsterdam/design-system-tokens": "0.1.8",
+    "@amsterdam/design-system-tokens": "0.3.0",
     "sass": "1.69.5"
   },
   "dependencies": {
-    "@utrecht/components": "2.0.0"
+    "@utrecht/components": "3.0.0"
   },
-  "gitHead": "930baf5f841a4a368c75a7e72e96838ce3f09c79"
+  "gitHead": "0201bd289e2eec2297f23d93959718f7235d76c4"
 }

package/{utils → src/common}/breakpoint.scss

@@ -8,12 +8,6 @@
  * We to resort to Sass variables for our breakpoint values.
  */
 
-/**
- * The breakpoint for typography is 854px = 53.375rems.
- * @deprecated To be replaced with the grid breakpoints.
-*/
-$amsterdam-breakpoint-typography: 53.375rem;
-
 /** The breakpoint at which medium screens start. */
 $amsterdam-breakpoint-medium: 36rem;
 

package/src/{accordion → components/accordion}/accordion.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-accordion__header {
   display: flex;
   margin-block: 0;
@@ -22,16 +20,17 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-narrow-font-size);
+  font-size: var(--amsterdam-accordion-button-spacious-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-line-height);
+  line-height: var(--amsterdam-accordion-button-spacious-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-accordion-button-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-accordion-button-compact-font-size);
+    line-height: var(--amsterdam-accordion-button-compact-line-height);
   }
 
   &:focus {

package/src/{alert → components/alert}/alert.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-alert {
   align-items: flex-start;
   background-color: var(--amsterdam-alert-background-color);
@@ -30,12 +28,13 @@
 .amsterdam-alert__title {
   color: var(--amsterdam-alert-title-color);
   font-family: var(--amsterdam-alert-title-font-family);
-  font-size: var(--amsterdam-alert-title-narrow-font-size);
+  font-size: var(--amsterdam-alert-title-spacious-font-size);
   font-weight: var(--amsterdam-alert-title-font-weight);
-  line-height: var(--amsterdam-alert-title-line-height);
+  line-height: var(--amsterdam-alert-title-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-alert-title-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-alert-title-compact-font-size);
+    line-height: var(--amsterdam-alert-title-compact-line-height);
   }
 
   @include reset;

package/src/{blockquote → components/blockquote}/blockquote.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,9 +14,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-narrow-font-size);
+  font-size: var(--amsterdam-blockquote-spacious-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-line-height);
+  line-height: var(--amsterdam-blockquote-spacious-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -29,8 +27,9 @@
     content: close-quote;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-blockquote-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-blockquote-spacious-font-size);
+    line-height: var(--amsterdam-blockquote-spacious-line-height);
   }
 
   @include reset;

package/src/components/breadcrumb/breadcrumb.scss

@@ -0,0 +1,57 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  padding-inline: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-breadcrumb {
+  font-family: var(--amsterdam-breadcrumb-font-family, inherit);
+  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
+  font-weight: var(--amsterdam-breadcrumb-font-weight);
+  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
+  }
+}
+
+.amsterdam-breadcrumb__list {
+  break-after: avoid;
+  break-inside: avoid;
+
+  @include reset;
+}
+
+.amsterdam-breadcrumb__item {
+  display: inline;
+}
+
+.amsterdam-breadcrumb__item:not(:last-child)::after {
+  background-image: var(--amsterdam-breadcrumb-separator-background-image);
+  background-repeat: no-repeat;
+  content: "";
+  display: inline-block;
+  height: 1ex;
+  margin-inline: 0.5rem;
+  width: 1ex;
+}
+
+.amsterdam-breadcrumb__link {
+  color: var(--amsterdam-breadcrumb-item-link-color);
+  outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
+  text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
+
+  &:hover {
+    color: var(--amsterdam-breadcrumb-item-link-hover-color);
+    text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
+  }
+}

package/src/{button → components/button}/button.scss

@@ -3,21 +3,22 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../node_modules/@utrecht/components/button/css";
-@import "../../utils/breakpoint";
+@import "../../../node_modules/@utrecht/components/button/css";
 
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-narrow-font-size);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-button-wide-font-size);
-  }
+  font-size: var(--amsterdam-button-spacious-font-size);
+  line-height: var(--amsterdam-button-spacious-line-height);
 
   @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
+  }
 }
 
 .amsterdam-button--secondary {

package/src/components/card/README.md

@@ -0,0 +1,25 @@
+# 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.
+
+## Richtlijnen
+
+- De titel van een card is een link in een heading.
+  Hier gelden dezelfde richtlijnen voor als voor reguliere [links](?path=/docs/react_navigation-link--docs) en [headings](?path=/docs/react_text-heading--docs).
+  De link is actief op het hele gebied van de card.
+- Een card heeft meer inhoud nodig dan alleen een titel.
+  Vul dit aan met tekstuele en/of visuele inhoud.
+- De tekst zet je in een reguliere paragraaf.
+  Alleen voor een tagline of datum gebruik je de kleinste tekstgrootte.
+- Als de inhoud geen detailpagina vertegenwoordigt is dit component niet de beste optie.
+  Om te verwijzen naar een thematische pagina gebruik je een [top task link](?path=/docs/react_navigation-top-task-link--docs).
+  Ook kun je een [reguliere link](?path=/docs/react_navigation-link--docs) inzetten.
+
+## 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.

package/src/{card → components/card}/card.scss

@@ -45,12 +45,12 @@
 
 .amsterdam-card__link {
   color: var(--amsterdam-card-link-color);
-  text-decoration: none;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-line: var(--amsterdam-card-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-card-link-text-underline-offset);
 
   &:hover {
     color: var(--amsterdam-card-link-hover-color);
-    text-decoration: underline;
+    text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line);
   }
 }

package/src/{checkbox → components/checkbox}/checkbox.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-checkbox__input {
   appearance: none;
   margin-block: 0;
@@ -21,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height));
   width: 1.5rem;
 
   &::after {
@@ -34,8 +32,8 @@
     width: 100%;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  .amsterdam-theme--compact & {
+    height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height));
   }
 }
 
@@ -48,16 +46,16 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-narrow-font-size);
+  font-size: var(--amsterdam-checkbox-spacious-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-line-height);
+  line-height: var(--amsterdam-checkbox-spacious-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
+    text-decoration-line: underline;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.375rem;
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
@@ -65,8 +63,9 @@
     }
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-checkbox-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-checkbox-compact-font-size);
+    line-height: var(--amsterdam-checkbox-compact-line-height);
   }
 
   @include reset;

package/src/{dialog → components/dialog}/dialog.scss

@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
+@import "../../common/breakpoint";
 
 .amsterdam-dialog {
   background-color: var(--amsterdam-dialog-background-color);
@@ -52,12 +52,13 @@
   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-size: var(--amsterdam-dialog-title-spacious-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-line-height);
+  line-height: var(--amsterdam-dialog-title-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-dialog-title-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-dialog-title-compact-font-size);
+    line-height: var(--amsterdam-dialog-title-compact-line-height);
   }
 
   @include reset;
@@ -67,7 +68,6 @@
   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;

package/src/{form-label → components/form-label}/form-label.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -12,13 +10,14 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-narrow-font-size);
+  font-size: var(--amsterdam-form-label-spacious-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-form-label-wide-font-size);
-  }
+  line-height: var(--amsterdam-form-label-spacious-line-height);
 
   @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-form-label-compact-font-size);
+    line-height: var(--amsterdam-form-label-compact-line-height);
+  }
 }

package/src/components/grid/README.md

@@ -0,0 +1,21 @@
+# Grid
+
+Verdeelt de breedte van het scherm in kolommen waarop de elementen van een pagina worden uitgelijnd.
+
+## Gebruik
+
+Elke pagina moet het grid gebruiken als basis voor de layout.
+Het staat 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.
+Vóór deze componenten sluit je een instantie van het grid af.
+Erbinnen en eventueel erna start je een nieuwe.
+Meerdere instanties van het grid component zijn dus mogelijk op een pagina.
+De kolommen van alle grids moeten wel precies op elkaar aansluiten.
+
+Binnen het grid maak je cellen die de gewenste inhoud bevatten.
+Een cel beslaat vaak meerdere kolommen van het grid.
+
+## Ontwerp
+
+De [ontwerpkeuzes](?path=/docs/docs-designrichtlijnen-grid--docs) staan beschreven onder de designrichtlijnen.

package/src/{grid → components/grid}/grid.scss

@@ -3,11 +3,11 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
+@import "../../common/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+  --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
 
   display: grid;
   gap: var(--amsterdam-grid-gap);
@@ -23,9 +23,17 @@
   }
 }
 
-.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--compact {
+  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
+}
+
+.amsterdam-grid--gap-vertical--small {
+  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--gap-vertical--large {
+  row-gap: calc(var(--amsterdam-grid-gap) * 2);
 }
 
 .amsterdam-grid--padding-bottom--small {
@@ -63,3 +71,43 @@
 .amsterdam-grid--padding-vertical--large {
   padding-block: calc(var(--amsterdam-grid-gap) * 2);
 }
+
+.amsterdam-grid__cell--span-all {
+  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__cell--span-#{$i}-medium {
+      grid-column-end: span $i;
+    }
+
+    .amsterdam-grid__cell--start-#{$i}-medium {
+      grid-column-start: $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/components/header/README.md

@@ -0,0 +1,14 @@
+# Header
+
+A Header offers a container to display a City of Amsterdam logo, subsite title and page menu.
+
+## Guidelines
+
+- Use the Header when the site is hosted on amsterdam.nl or one of its subdomains.
+- The page menu can contain a maximum of 5 items, including menu and search.
+- When you have a long subsite title, use no or as little page menu items as possible.
+
+## References
+
+- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be use to group navigation elements.
+- [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent.