@amsterdam/design-system-css 0.1.9 → 0.2.0

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/{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/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);
-  }
-}

package/src/paragraph/paragraph.scss

@@ -1,48 +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-paragraph {
-  color: var(--amsterdam-paragraph-color);
-  font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-narrow-font-size);
-  font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-paragraph-wide-font-size);
-  }
-
-  @include reset;
-}
-
-.amsterdam-paragraph--small {
-  font-size: var(--amsterdam-paragraph-small-narrow-font-size);
-  line-height: var(--amsterdam-paragraph-small-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-paragraph-small-wide-font-size);
-  }
-}
-
-.amsterdam-paragraph--large {
-  font-size: var(--amsterdam-paragraph-large-narrow-font-size);
-  line-height: var(--amsterdam-paragraph-large-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-paragraph-large-wide-font-size);
-  }
-}
-
-.amsterdam-paragraph--inverse-color {
-  color: var(--amsterdam-paragraph-inverse-color);
-}