@amsterdam/design-system-css 0.1.8 → 0.2.0

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

@@ -4,6 +4,8 @@
  */
 
 /* Append here */
+@import "./logo/logo";
+@import "./dialog/dialog";
 @import "./image/image";
 @import "./pagination/pagination";
 @import "./accordion/accordion";
@@ -14,7 +16,6 @@
 @import "./button/button";
 @import "./card/card";
 @import "./checkbox/checkbox";
-@import "./footer/footer";
 @import "./form-label/form-label";
 @import "./grid/grid";
 @import "./grid/grid-cell";

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

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -24,8 +22,9 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-narrow-font-size);
-  line-height: var(--amsterdam-link-standalone-line-height);
+  font-size: var(--amsterdam-link-standalone-spacious-font-size);
+  line-height: var(--amsterdam-link-standalone-spacious-line-height);
+  text-decoration-line: var(--amsterdam-link-standalone-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-standalone-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-standalone-text-underline-offset);
 
@@ -34,8 +33,9 @@
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-link-standalone-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-standalone-compact-font-size);
+    line-height: var(--amsterdam-link-standalone-compact-line-height);
   }
 }
 
@@ -43,11 +43,12 @@
   font-family: var(--amsterdam-link-inline-font-family);
   font-size: var(--amsterdam-link-inline-font-size);
   line-height: var(--amsterdam-link-inline-line-height);
-  text-decoration: var(--amsterdam-link-inline-text-decoration);
+  text-decoration-line: var(--amsterdam-link-inline-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-inline-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-inline-text-underline-offset);
 
   &:hover {
-    text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
+    text-decoration-thickness: var(--amsterdam-link-inline-hover-text-decoration-thickness);
     text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
   }
 
@@ -59,19 +60,20 @@
 .amsterdam-link--in-list {
   align-items: flex-start;
   display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-narrow-font-size);
+  font-size: var(--amsterdam-link-in-list-spacious-font-size);
   gap: var(--amsterdam-link-in-list-gap);
-  line-height: var(--amsterdam-link-in-list-line-height);
-  text-decoration: var(--amsterdam-link-in-list-text-decoration);
+  line-height: var(--amsterdam-link-in-list-spacious-line-height);
+  text-decoration-line: var(--amsterdam-link-in-list-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-link-in-list-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-link-in-list-text-underline-offset);
 
   &:hover {
-    text-decoration: var(--amsterdam-link-in-list-hover-text-decoration);
-    text-decoration-thickness: var(--amsterdam-link-in-list-hover-text-decoration-thickness);
-    text-underline-offset: var(--amsterdam-link-in-list-hover-text-underline-offset);
+    text-decoration-line: var(--amsterdam-link-in-list-hover-text-decoration-line);
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-link-in-list-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-link-in-list-compact-font-size);
+    line-height: var(--amsterdam-link-in-list-compact-line-height);
   }
 }
 
@@ -106,13 +108,3 @@
     color: var(--amsterdam-link-on-background-light-visited-color);
   }
 }
-
-.amsterdam-link--inline.amsterdam-link--on-background-dark,
-.amsterdam-link--inline.amsterdam-link--on-background-light {
-  text-decoration: var(--amsterdam-link-inline-hover-text-decoration);
-  text-underline-offset: var(--amsterdam-link-inline-hover-text-underline-offset);
-
-  &:hover {
-    text-decoration: var(--amsterdam-link-inline-text-decoration);
-  }
-}

package/src/components/logo/README.md

@@ -0,0 +1,38 @@
+# Logo
+
+Het logo van de gemeente bestaat uit een beeldmerk (3 Andreaskruisen) en een woordmerk (Gemeente Amsterdam).
+Het logo heeft een vaste kleur, grootte en positie en staat op al onze websites.
+
+## Specificaties
+
+Het design system biedt het correcte logo voor online gebruik aan.
+Er bestaan andere varianten van het logo, maar die mogen op websites en in applicaties niet gebruikt worden.
+Het Nederlandse logo voor Nederlandstalige websites en anderstalige websites behalve Engels.
+Het Engelstalige logo gebruiken we voor Engelstalige websites.
+Dit logo wordt later toegevoegd aan het design system.
+In de tussentijd kun je een afbeelding van dit logo downloaden vanaf [Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/logo-gemeente-amsterdam/#hba498e5c-2388-464f-b769-7622a5d32bd1).
+
+## Uitzondering
+
+Gebruik het submerklogo als de website eigendom is van 1 van de 4 submerken.
+Zij hebben een aparte status omdat er sprake is van een bijzondere vorm van dienstverlening die niet direct met de gemeente in verband wordt gebracht.
+
+De submerken zijn:
+
+- GGD Amsterdam
+- Stadsarchief
+- Stadsbank van Lening
+- VGA Verzekeringen
+
+## Eisen voor alle logo´s
+
+- Het logo wordt altijd getoond.
+- Het logo is linksboven uitgelijnd in de header.
+- Het logo verwijst naar de homepage van je website of applicatie.
+- Als de applicatie een formulier, applicatie of tool is zonder homepage, dan linkt het logo naar de pagina van waar naar het formulier, applicatie of tool wordt verwezen.
+
+De hoogte van het logo is altijd 40 pixels. Dit geldt ook voor de submerklogo´s.
+
+## Download
+
+- [Logoset voor website en apps (ZIP, 10 kB)](https://assets.amsterdam.nl/publish/pages/1007650/logoset_voor_websites_en_apps.zip)

package/src/components/logo/logo.scss

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-logo {
+  height: var(--amsterdam-logo-height);
+}
+
+.amsterdam-logo__emblem {
+  fill: var(--amsterdam-logo-emblem-color);
+}
+
+.amsterdam-logo__text-primary {
+  fill: var(--amsterdam-logo-title-color);
+}
+
+.amsterdam-logo__text-secondary {
+  fill: var(--amsterdam-logo-subsite-color);
+}

package/src/{ordered-list → components/ordered-list}/ordered-list.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 /** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
@@ -26,15 +24,11 @@
 .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
   color: var(--amsterdam-ordered-list-color);
   font-family: var(--amsterdam-ordered-list-font-family);
-  font-size: var(--amsterdam-ordered-list-narrow-font-size);
+  font-size: var(--amsterdam-ordered-list-spacious-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-line-height);
+  line-height: var(--amsterdam-ordered-list-spacious-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-ordered-list-wide-font-size);
-  }
-
   /** List items are responsible for indentation and marker positioning. */
   .amsterdam-ordered-list__item {
     margin-inline-start: var(--amsterdam-ordered-list-item-margin-inline-start);
@@ -51,3 +45,8 @@
     padding-inline-start: var(--amsterdam-ordered-list-ordered-list-item-padding-inline-start);
   }
 }
+
+.amsterdam-theme--compact .amsterdam-ordered-list:not(.amsterdam-ordered-list--no-markers) {
+  font-size: var(--amsterdam-ordered-list-compact-font-size);
+  line-height: var(--amsterdam-ordered-list-compact-line-height);
+}

package/src/{page-heading → components/page-heading}/page-heading.scss

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

package/src/{page-menu → components/page-menu}/README.md

@@ -13,3 +13,5 @@ Het Page Menu wordt alleen gebruikt in het Header en Footer component en is uits
 ## Relevante WCAG eisen
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
+
+PageMenu 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/{page-menu → components/page-menu}/page-menu.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset-list {
   box-sizing: border-box;
   margin-block: 0;
@@ -35,22 +33,29 @@
   @include reset-list;
 }
 
+.amsterdam-page-menu--align-end {
+  justify-content: end;
+}
+
 @mixin page-menu-item {
   color: var(--amsterdam-page-menu-item-color);
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-narrow-font-size);
+  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
   font-weight: var(--amsterdam-page-menu-item-font-weight);
   gap: var(--amsterdam-page-menu-item-gap);
-  line-height: var(--amsterdam-page-menu-item-line-height);
-  outline-offset: var(--amsterdam-focus-outline-offset);
+  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  outline-offset: var(--amsterdam-page-menu-item-outline-offset);
   text-align: center;
-  text-decoration: var(--amsterdam-page-menu-item-text-decoration);
+  text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-page-menu-item-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
   touch-action: manipulation;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-page-menu-item-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-page-menu-item-compact-font-size);
+    line-height: var(--amsterdam-page-menu-item-compact-line-height);
   }
 }
 
@@ -70,7 +75,7 @@
 .amsterdam-page-menu__link:hover,
 .amsterdam-page-menu__button:hover {
   color: var(--amsterdam-page-menu-item-hover-color);
-  text-decoration: var(--amsterdam-page-menu-item-hover-text-decoration);
+  text-decoration-line: var(--amsterdam-page-menu-item-hover-text-decoration-line);
 }
 
 .amsterdam-page-menu__link svg,

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

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin list-reset {
   list-style-type: none;
   margin-block: 0;
@@ -16,15 +14,16 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-narrow-font-size);
+  font-size: var(--amsterdam-pagination-spacious-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-line-height);
+  line-height: var(--amsterdam-pagination-spacious-line-height);
 
   @include list-reset;
 
-  @media screen and (width > $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-pagination-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-pagination-compact-font-size);
+    line-height: var(--amsterdam-pagination-compact-line-height);
   }
 }
 
@@ -45,13 +44,14 @@
   gap: 0.5rem;
   outline-offset: var(--amsterdam-pagination-button-outline-offset);
   padding-inline: 0.75rem;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);
   touch-action: manipulation;
 
   &:hover {
     color: var(--amsterdam-pagination-button-hover-color);
-    text-decoration: underline;
+    text-decoration-line: var(--amsterdam-pagination-button-hover-text-decoration-line);
   }
 
   &:disabled {

package/src/components/paragraph/paragraph.scss

@@ -0,0 +1,49 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-paragraph {
+  color: var(--amsterdam-paragraph-color);
+  font-family: var(--amsterdam-paragraph-font-family);
+  font-size: var(--amsterdam-paragraph-spacious-medium-font-size);
+  font-weight: var(--amsterdam-paragraph-font-weight);
+  line-height: var(--amsterdam-paragraph-spacious-medium-line-height);
+
+  @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-medium-font-size);
+    line-height: var(--amsterdam-paragraph-compact-medium-line-height);
+  }
+}
+
+.amsterdam-paragraph--small {
+  font-size: var(--amsterdam-paragraph-spacious-small-font-size);
+  line-height: var(--amsterdam-paragraph-spacious-small-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-small-font-size);
+    line-height: var(--amsterdam-paragraph-compact-small-line-height);
+  }
+}
+
+.amsterdam-paragraph--large {
+  font-size: var(--amsterdam-paragraph-spacious-large-font-size);
+  line-height: var(--amsterdam-paragraph-spacious-large-line-height);
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-paragraph-compact-large-font-size);
+    line-height: var(--amsterdam-paragraph-compact-large-line-height);
+  }
+}
+
+.amsterdam-paragraph--inverse-color {
+  color: var(--amsterdam-paragraph-inverse-color);
+}

package/src/{top-task-link → components/top-task-link}/top-task-link.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -22,12 +20,16 @@
 .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-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);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-top-task-link-label-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-top-task-link-label-compact-font-size);
+    line-height: var(--amsterdam-top-task-link-label-compact-line-height);
   }
 
   @include reset;
@@ -35,20 +37,19 @@
 
 .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: 0.5rem;
+  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-narrow-font-size);
+  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-line-height);
+  line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-top-task-link-description-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-top-task-link-description-compact-font-size);
+    line-height: var(--amsterdam-top-task-link-description-compact-line-height);
   }
 
   @include reset;

package/src/{unordered-list → components/unordered-list}/unordered-list.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 /** Apply border box sizing, reset whitespace and list styles. */
 @mixin reset {
   box-sizing: border-box;
@@ -26,15 +24,11 @@
 .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-size: var(--amsterdam-unordered-list-spacious-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-line-height);
+  line-height: var(--amsterdam-unordered-list-spacious-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-unordered-list-wide-font-size);
-  }
-
   /** List items are responsible for indentation and marker positioning. */
   .amsterdam-unordered-list__item {
     margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
@@ -51,3 +45,8 @@
     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);
+}

package/dist/footer/footer.css

@@ -1 +0,0 @@
-.amsterdam-footer__top{background-color:var(--amsterdam-footer-top-background-color)}/*# sourceMappingURL=footer.css.map */

package/dist/footer/footer.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/footer/footer.scss"],"names":[],"mappings":"AAOA,uBACE","file":"footer.css"}

package/src/footer/footer.scss

@@ -1,10 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-.amsterdam-footer__top {
-  background-color: var(--amsterdam-footer-top-background-color);
-}

package/src/heading/heading.scss

@@ -1,62 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-@mixin reset {
-  box-sizing: border-box;
-  margin-block: 0;
-  -webkit-text-size-adjust: 100%;
-}
-
-.amsterdam-heading {
-  break-after: avoid;
-  break-inside: avoid;
-  color: var(--amsterdam-heading-color);
-  font-family: var(--amsterdam-heading-font-family);
-  font-weight: var(--amsterdam-heading-font-weight);
-
-  @include reset;
-}
-
-.amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-1-narrow-font-size);
-  line-height: var(--amsterdam-heading-1-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-1-wide-font-size);
-  }
-}
-
-.amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-2-narrow-font-size);
-  line-height: var(--amsterdam-heading-2-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-2-wide-font-size);
-  }
-}
-
-.amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-3-narrow-font-size);
-  line-height: var(--amsterdam-heading-3-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-3-wide-font-size);
-  }
-}
-
-.amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-4-narrow-font-size);
-  line-height: var(--amsterdam-heading-4-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-4-wide-font-size);
-  }
-}
-
-.amsterdam-heading--inverse-color {
-  color: var(--amsterdam-heading-inverse-color);
-}

package/src/icon/icon.scss

@@ -1,104 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-
-@import "../../utils/breakpoint";
-
-.amsterdam-icon {
-  align-items: center;
-  display: inline-flex;
-}
-
-.amsterdam-icon svg {
-  fill: currentColor;
-}
-
-.amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-size-3-icon-size-narrow) * var(--amsterdam-icon-size-3-container-multiplier));
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    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 (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-6-icon-size-wide);
-    width: var(--amsterdam-icon-size-6-icon-size-wide);
-  }
-}
-
-.amsterdam-icon--size-7 {
-  height: calc(var(--amsterdam-icon-size-7-icon-size-narrow) * var(--amsterdam-icon-size-7-container-multiplier));
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-icon-size-7-icon-size-wide) * var(--amsterdam-icon-size-7-container-multiplier));
-  }
-}
-
-.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 (min-width: $amsterdam-breakpoint-typography) {
-    height: var(--amsterdam-icon-size-7-icon-size-wide);
-    width: var(--amsterdam-icon-size-7-icon-size-wide);
-  }
-}