@amsterdam/design-system-css 0.1.2 → 0.1.4

package/dist/button/button.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/button/button.scss","../../node_modules/@utrecht/components/button/css/index.scss","../../node_modules/@utrecht/components/common/focus/_mixin.scss","../../node_modules/@utrecht/components/button/css/_mixin.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAAA;AA6BA;AC7BA;AAAA;AAAA;AAAA;AAAA;ADAA;AAAA;AAAA;AAAA;AAAA;AA6BA;ADpBA;AEAE;AAAA;AAAA;;AAAA;AAAA;AAAA;EAOA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAOA;AAAA;AAAA;AAAA;EAIA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAaA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EAUA;EACA;AAAA;AAAA;AAAA;EAIA;EAEA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EFzOF;IE0OI;IACA;AAEA;AAAA;AAAA;AAAA;AAAA;AAAA;IAMA;IACA;IACA;AAEA;;;;AFlPJ;EEuPE;EACA;EACA;EACA;;;AFtPF;AACE;EEyPA;;;AFrPF;EEyPE;;;AFrPF;EEyRE;EACA;EACA;;;AFvRF;AAAA;EEqPE;EACA;EACA;EACA;;;AFnPF;AACE;AC5BA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADqBF;EE6PE;EACA;EACA;EACA;;;AFxPA;AACE;AAAA;ACzCF;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADmCA;EE+OA;EACA;EACA;EACA;AARA;ADxRA;AAAA;AAAA;AAAA;EAIA;AAAA;EAGA;EACA;EACA;EACA;EACA;;;ADwCA;AACA;AACA;ACtCA;EACA;EACA;;;ADiDF;AAAA;EEkOE;EACA;EACA;EACA;;;AFhOF;AAAA;EE2ME;EACA;EACA;;;AA6BA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAKF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AAtBF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;AAAA;AAAA;EAGA;EACA;;;AC3WJ;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;AJGA;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE","file":"button.css"}

package/dist/form-label/form-label.css

@@ -0,0 +1,26 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
+.amsterdam-form-label {
+  color: var(--amsterdam-form-label-color);
+  font-family: var(--amsterdam-form-label-font-family);
+  font-size: var(--amsterdam-form-label-font-size-narrow);
+  font-weight: var(--amsterdam-form-label-font-weight);
+  line-height: var(--amsterdam-form-label-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-form-label {
+    font-size: var(--amsterdam-form-label-font-size-wide);
+  }
+}
+
+/*# sourceMappingURL=form-label.css.map */

package/dist/form-label/form-label.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/form-label/form-label.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;EACA;EACA;;AAEA;EAPF;IAQI","file":"form-label.css"}

package/dist/heading/heading.css

@@ -1,114 +1,64 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
 .amsterdam-heading {
+  color: var(--amsterdam-heading-color);
+  font-family: var(--amsterdam-heading-font-family);
+  font-weight: var(--amsterdam-heading-font-weight);
+  box-sizing: border-box;
   break-after: avoid;
   break-inside: avoid;
-  color: black;
-  font-weight: 800;
-  margin-block-end: 0;
-  margin-block-start: 0;
-  margin-inline-end: 0;
-  margin-inline-start: 0;
+  margin-block: 0;
+  margin-inline: 0;
 }
 
 .amsterdam-heading-1 {
-  font-size: clamp(
-    2rem,
-    calc(
-      2rem + 0.03 * (100vw - 20rem)
-    ),
-    5rem
-  );
-  line-height: clamp(
-    2.1875rem,
-    calc(
-      2.1875rem + 0.028125 * (100vw - 20rem)
-    ),
-    5rem
-  );
+  font-size: var(--amsterdam-heading-1-font-size-narrow);
+  line-height: var(--amsterdam-heading-1-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-heading-1 {
+    font-size: var(--amsterdam-heading-1-font-size-wide);
+  }
 }
 
 .amsterdam-heading-2 {
-  font-size: clamp(
-    1.75rem,
-    calc(
-      1.75rem + 0.0175 * (100vw - 20rem)
-    ),
-    3.5rem
-  );
-  line-height: clamp(
-    2.125rem,
-    calc(
-      2.125rem + 0.0175 * (100vw - 20rem)
-    ),
-    3.875rem
-  );
+  font-size: var(--amsterdam-heading-2-font-size-narrow);
+  line-height: var(--amsterdam-heading-2-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-heading-2 {
+    font-size: var(--amsterdam-heading-2-font-size-wide);
+  }
 }
 
 .amsterdam-heading-3 {
-  font-size: clamp(
-    1.5rem,
-    calc(
-      1.5rem + 0.01 * (100vw - 20rem)
-    ),
-    2.5rem
-  );
-  line-height: clamp(
-    2rem,
-    calc(
-      2rem + 0.01 * (100vw - 20rem)
-    ),
-    3rem
-  );
+  font-size: var(--amsterdam-heading-3-font-size-narrow);
+  line-height: var(--amsterdam-heading-3-line-height);
 }
-
-.amsterdam-heading-4 {
-  font-size: clamp(
-    1.375rem,
-    calc(
-      1.375rem + 0.00625 * (100vw - 20rem)
-    ),
-    2rem
-  );
-  line-height: clamp(
-    1.9375rem,
-    calc(
-      1.9375rem + 0.004375 * (100vw - 20rem)
-    ),
-    2.375rem
-  );
+@media screen and (width > 53.375rem) {
+  .amsterdam-heading-3 {
+    font-size: var(--amsterdam-heading-3-font-size-wide);
+  }
 }
 
-.amsterdam-heading-5 {
-  font-size: clamp(
-    1.125rem,
-    calc(
-      1.125rem + 0.00375 * (100vw - 20rem)
-    ),
-    1.5rem
-  );
-  line-height: clamp(
-    1.5625rem,
-    calc(
-      1.5625rem + 0.00375 * (100vw - 20rem)
-    ),
-    1.9375rem
-  );
+.amsterdam-heading-4 {
+  font-size: var(--amsterdam-heading-4-font-size-narrow);
+  line-height: var(--amsterdam-heading-4-line-height);
 }
-
-.amsterdam-heading-6 {
-  font-size: clamp(
-    1rem,
-    calc(
-      1rem + 0.00125 * (100vw - 20rem)
-    ),
-    1.125rem
-  );
-  line-height: clamp(
-    1.375rem,
-    calc(
-      1.375rem + 0.000625 * (100vw - 20rem)
-    ),
-    1.4375rem
-  );
+@media screen and (width > 53.375rem) {
+  .amsterdam-heading-4 {
+    font-size: var(--amsterdam-heading-4-font-size-wide);
+  }
 }
 
 /*# sourceMappingURL=heading.css.map */

package/dist/heading/heading.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/heading/heading.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAGF;EACE;;;;;AAAA,AAAA,AAAA,AAAA,AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;;;;AAAA,AAAA,AAAA,AAAA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"heading.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/heading/heading.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADUA;EACE;EACA;EACA;EAVA;EACA;EACA;EACA;EACA;;;AAWF;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI","file":"heading.css"}

package/dist/icon/icon.css

@@ -1,37 +1,122 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
 .amsterdam-icon {
   align-items: center;
   display: inline-flex;
-  /* TODO: this height should be provided by the text element its part of? */
-  height: clamp(
-    1.5rem,
-    calc(
-      1.5rem + 0.00125 * (100vw - 20rem)
-    ),
-    1.625rem
-  );
-  /* TODO: 12px is not part of the design system, what should this be? */
-  margin-inline-end: 12px;
-  /* Offset icon by 3px, because Amsterdam Sans vertical alignment is off */
-  padding-block-end: 3px;
 }
 
 .amsterdam-icon svg {
   fill: currentColor;
 }
 
-.amsterdam-icon-small svg {
-  height: 1rem;
-  width: 1rem;
+.amsterdam-icon-size-3 {
+  height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-3 {
+    height: calc(var(--amsterdam-icon-size-3-icon-size-wide) * var(--amsterdam-icon-size-3-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-3 svg {
+  height: var(--amsterdam-icon-size-3-icon-size-narrow);
+  width: var(--amsterdam-icon-size-3-icon-size-narrow);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-3 svg {
+    height: var(--amsterdam-icon-size-3-icon-size-wide);
+    width: var(--amsterdam-icon-size-3-icon-size-wide);
+  }
+}
+
+.amsterdam-icon-size-4 {
+  height: calc(var(--amsterdam-icon-size-4-icon-size-narrow) * var(--amsterdam-icon-size-4-container-multiplier));
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-4 {
+    height: calc(var(--amsterdam-icon-size-4-icon-size-wide) * var(--amsterdam-icon-size-4-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-4 svg {
+  height: var(--amsterdam-icon-size-4-icon-size-narrow);
+  width: var(--amsterdam-icon-size-4-icon-size-narrow);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-4 svg {
+    height: var(--amsterdam-icon-size-4-icon-size-wide);
+    width: var(--amsterdam-icon-size-4-icon-size-wide);
+  }
+}
+
+.amsterdam-icon-size-5 {
+  height: calc(var(--amsterdam-icon-size-5-icon-size-narrow) * var(--amsterdam-icon-size-5-container-multiplier));
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-5 {
+    height: calc(var(--amsterdam-icon-size-5-icon-size-wide) * var(--amsterdam-icon-size-5-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-5 svg {
+  height: var(--amsterdam-icon-size-5-icon-size-narrow);
+  width: var(--amsterdam-icon-size-5-icon-size-narrow);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-5 svg {
+    height: var(--amsterdam-icon-size-5-icon-size-wide);
+    width: var(--amsterdam-icon-size-5-icon-size-wide);
+  }
+}
+
+.amsterdam-icon-size-6 {
+  height: calc(var(--amsterdam-icon-size-6-icon-size-narrow) * var(--amsterdam-icon-size-6-container-multiplier));
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-6 {
+    height: calc(var(--amsterdam-icon-size-6-icon-size-wide) * var(--amsterdam-icon-size-6-container-multiplier));
+  }
+}
+
+.amsterdam-icon-size-6 svg {
+  height: var(--amsterdam-icon-size-6-icon-size-narrow);
+  width: var(--amsterdam-icon-size-6-icon-size-narrow);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-6 svg {
+    height: var(--amsterdam-icon-size-6-icon-size-wide);
+    width: var(--amsterdam-icon-size-6-icon-size-wide);
+  }
 }
 
-.amsterdam-icon-medium svg {
-  height: 1.5rem;
-  width: 1.5rem;
+.amsterdam-icon-size-7 {
+  height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-7 {
+    height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
+  }
 }
 
-.amsterdam-icon-large svg {
-  height: 2rem;
-  width: 2rem;
+.amsterdam-icon-size-7 svg {
+  height: var(--amsterdam-icon-size-7-icon-size-narrow);
+  width: var(--amsterdam-icon-size-7-icon-size-narrow);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-icon-size-7 svg {
+    height: var(--amsterdam-icon-size-7-icon-size-wide);
+    width: var(--amsterdam-icon-size-7-icon-size-wide);
+  }
 }
 
 /*# sourceMappingURL=icon.css.map */

package/dist/icon/icon.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/icon/icon.scss"],"names":[],"mappings":"AAEA;EACE;EACA;AAEA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAEA;EACA;AAEA;EACA;;;AAGF;EACE;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA","file":"icon.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/icon/icon.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;;;AAGF;EACE;;;AAGF;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAGJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA;;;;AAIJ;EACE;;AAEA;EAHF;IAII;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI;IACA","file":"icon.css"}

package/dist/link/link.css

@@ -1,69 +1,97 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
 .amsterdam-link {
-  color: var(--amsterdam-color-primary-blue);
-  display: inline-flex;
-  font-size: clamp(
-    1.125rem,
-    calc(
-      1.125rem + 0.00375 * (100vw - 20rem)
-    ),
-    1.5rem
-  );
-  font-weight: 800;
-  line-height: clamp(
-    1.8125rem,
-    calc(
-      1.8125rem + 0.005625 * (100vw - 20rem)
-    ),
-    2.375rem
-  );
-  outline-offset: var(--amsterdam-focus-outline-offset);
-  text-decoration: none;
+  color: var(--amsterdam-link-color, blue);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-link-font-size-narrow);
+  line-height: var(--amsterdam-link-line-height);
+  outline-offset: var(--amsterdam-link-outline-offset);
+  text-decoration: var(--amsterdam-link-text-decoration, underline);
+  text-decoration-color: var(--amsterdam-link-text-decoration-color, currentColor);
+  text-decoration-thickness: var(--amsterdam-link-text-decoration-thickness, 1px);
+  text-underline-offset: var(--amsterdam-link-text-underline-offset);
+}
+.amsterdam-link:hover, .amsterdam-link:active {
+  color: var(--amsterdam-link-hover-color);
+  text-decoration: var(--amsterdam-link-hover-text-decoration);
+  text-decoration-thickness: var(--amsterdam-link-hover-text-decoration-thickness, 1px);
+}
+.amsterdam-link:focus {
+  color: var(--amsterdam-link-focus-color);
+  text-decoration: var(--amsterdam-link-focus-text-decoration);
+}
+.amsterdam-link:visited {
+  color: var(--amsterdam-link-visited-color);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-link {
+    font-size: var(--amsterdam-link-font-size-wide);
+  }
 }
 
-.amsterdam-link:focus,
-.amsterdam-link:hover {
-  outline-offset: var(--amsterdam-focus-outline-offset);
-  text-decoration: underline;
+.amsterdam-link--standalone-bold {
+  font-weight: var(--amsterdam-link-standalone-bold-font-weight);
 }
 
-.amsterdam-link-standalone {
-  box-shadow: inset 0 -2px var(--amsterdam-color-primary-blue);
-  font-weight: 400;
-  transition: box-shadow 100ms ease-in-out, color 100ms ease-in-out;
+.amsterdam-link--inline {
+  font-family: var(--amsterdam-link-inline-font-family);
+  font-size: var(--amsterdam-link-inline-font-size);
+  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
+}
+.amsterdam-link--inline:visited {
+  color: var(--amsterdam-link-inline-visited-color);
 }
 
-.amsterdam-link-standalone:focus,
-.amsterdam-link-standalone:hover {
-  box-shadow: inset 0 -3px var(--amsterdam-color-primary-blue);
-  text-decoration: none;
+.amsterdam-link--in-list {
+  align-items: flex-start;
+  display: inline-flex;
+  font-size: var(--amsterdam-link-in-list-font-size-narrow);
+  gap: var(--amsterdam-link-in-list-gap);
+  line-height: var(--amsterdam-link-in-list-line-height);
+  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
+}
+.amsterdam-link--in-list span.amsterdam-icon svg {
+  height: 16px;
+  width: 16px;
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-link--in-list {
+    font-size: var(--amsterdam-link-in-list-font-size-wide);
+  }
 }
 
-.amsterdam-link-inline {
-  color: var(--amsterdam-color-primary-blue);
-  display: inline;
-  font-size: inherit;
-  font-weight: 400;
-  letter-spacing: inherit;
-  line-height: inherit;
+.amsterdam-link--on-background-dark {
+  color: var(--amsterdam-link-on-background-dark-color);
+  text-decoration: var(--amsterdam-link-on-background-dark-text-decoration);
+}
+.amsterdam-link--on-background-dark:hover, .amsterdam-link--on-background-dark:active {
+  color: var(--amsterdam-link-on-background-dark-hover-color);
+  text-decoration: var(--amsterdam-link-on-background-dark-hover-text-decoration);
+}
+.amsterdam-link--on-background-dark:visited {
+  color: var(--amsterdam-link-on-background-dark-visited-color);
 }
 
-.amsterdam-link-inlist {
-  font-size: clamp(
-    1rem,
-    calc(
-      1rem + 0.00125 * (100vw - 20rem)
-    ),
-    1.125rem
-  );
-  font-weight: 400;
-  line-height: clamp(
-    1.5rem,
-    calc(
-      1.5rem + 0.00125 * (100vw - 20rem)
-    ),
-    1.625rem
-  );
-  padding-block: 12px;
+.amsterdam-link--on-background-light {
+  color: var(--amsterdam-link-on-background-light-color);
+  text-decoration: var(--amsterdam-link-on-background-light-text-decoration);
+}
+.amsterdam-link--on-background-light:hover, .amsterdam-link--on-background-light:active {
+  color: var(--amsterdam-link-on-background-light-hover-color);
+  text-decoration: var(--amsterdam-link-on-background-light-hover-text-decoration);
+}
+.amsterdam-link--on-background-light:visited {
+  color: var(--amsterdam-link-on-background-light-visited-color);
 }
 
 /*# sourceMappingURL=link.css.map */

package/dist/link/link.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/link/link.scss"],"names":[],"mappings":"AAEA;EACE;EACA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;;;AAGF;AAAA;EAEE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA","file":"link.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/link/link.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;;AAGF;EA3BF;IA4BI;;;;AAIJ;EACE;;;AAGF;EACE;EACA;EACA;;AAEA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;EACA;EACA;;AAGA;EACE;EACA;;AAGF;EAdF;IAeI;;;;AAIJ;EACE;EACA;;AAEA;EAEE;EACA;;AAGF;EACE;;;AAIJ;EACE;EACA;;AAEA;EAEE;EACA;;AAGF;EACE","file":"link.css"}

package/dist/list/list.css

@@ -1,7 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
 .amsterdam-list {
   list-style: none;
   margin-block: 0;
   padding-inline: 0;
+  box-sizing: border-box;
 }
 
 /*# sourceMappingURL=list.css.map */

package/dist/list/list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/list/list.scss"],"names":[],"mappings":"AAAA;EACE;EACA;EACA","file":"list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/list/list.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AASA;EACE;EACA;EACA;EANA","file":"list.css"}

package/dist/paragraph/paragraph.css

@@ -1,53 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+/*
+  The breakpoint is 854px / 16 = 53.375rems
+  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
+*/
 .amsterdam-paragraph {
-  font-size: clamp(
-    1.125rem,
-    calc(
-      1.125rem + 0.00375 * (100vw - 20rem)
-    ),
-    1.5rem
-  );
-  line-height: clamp(
-    1.8125rem,
-    calc(
-      1.8125rem + 0.005625 * (100vw - 20rem)
-    ),
-    2.375rem
-  );
+  color: var(--amsterdam-paragraph-color);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-paragraph-font-size-narrow);
+  font-weight: var(--amsterdam-paragraph-font-weight);
+  line-height: var(--amsterdam-paragraph-line-height);
+  box-sizing: border-box;
   margin-block: 0;
+  -webkit-text-size-adjust: 100%;
 }
-
-.amsterdam-paragraph-intro {
-  font-size: clamp(
-    1.375rem,
-    calc(
-      1.375rem + 0.005 * (100vw - 20rem)
-    ),
-    1.875rem
-  );
-  line-height: clamp(
-    2.1875rem,
-    calc(
-      2.1875rem + 0.00625 * (100vw - 20rem)
-    ),
-    2.8125rem
-  );
+@media screen and (width > 53.375rem) {
+  .amsterdam-paragraph {
+    font-size: var(--amsterdam-paragraph-font-size-wide);
+  }
 }
 
 .amsterdam-paragraph-small {
-  font-size: clamp(
-    1rem,
-    calc(
-      1rem + 0.00125 * (100vw - 20rem)
-    ),
-    1.125rem
-  );
-  line-height: clamp(
-    1.5rem,
-    calc(
-      1.5rem + 0.003125 * (100vw - 20rem)
-    ),
-    1.8125rem
-  );
+  font-size: var(--amsterdam-paragraph-small-font-size-narrow);
+  line-height: var(--amsterdam-paragraph-small-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-paragraph-small {
+    font-size: var(--amsterdam-paragraph-small-font-size-wide);
+  }
+}
+
+.amsterdam-paragraph-large {
+  font-size: var(--amsterdam-paragraph-large-font-size-narrow);
+  line-height: var(--amsterdam-paragraph-large-line-height);
+}
+@media screen and (width > 53.375rem) {
+  .amsterdam-paragraph-large {
+    font-size: var(--amsterdam-paragraph-large-font-size-wide);
+  }
 }
 
 /*# sourceMappingURL=paragraph.css.map */

package/dist/paragraph/paragraph.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss"],"names":[],"mappings":"AAEA;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;;AAAA,AAAA;;;AAGF;EACE;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA","file":"paragraph.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/paragraph/paragraph.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADQA;EACE;EACA;EACA;EACA;EACA;EAVA;EACA;EACA;;AAUA;EAPF;IAQI;;;;AAMJ;EACE;EACA;;AAEA;EAJF;IAKI;;;;AAIJ;EACE;EACA;;AAEA;EAJF;IAKI","file":"paragraph.css"}