@amsterdam/design-system-css 0.4.0 → 0.5.0

package/src/components/icon/icon.scss

@@ -18,75 +18,37 @@
 }
 
 .amsterdam-icon--size-3 {
-  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-size-3-line-height));
+  height: calc(var(--amsterdam-icon-size-3-font-size) * var(--amsterdam-icon-size-3-line-height));
 }
 
 .amsterdam-icon--size-3 svg {
-  height: var(--amsterdam-icon-spacious-size-3-font-size);
-  width: var(--amsterdam-icon-spacious-size-3-font-size);
+  height: var(--amsterdam-icon-size-3-font-size);
+  width: var(--amsterdam-icon-size-3-font-size);
 }
 
 .amsterdam-icon--size-4 {
-  height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-size-4-line-height));
+  height: calc(var(--amsterdam-icon-size-4-font-size) * var(--amsterdam-icon-size-4-line-height));
 }
 
 .amsterdam-icon--size-4 svg {
-  height: var(--amsterdam-icon-spacious-size-4-font-size);
-  width: var(--amsterdam-icon-spacious-size-4-font-size);
+  height: var(--amsterdam-icon-size-4-font-size);
+  width: var(--amsterdam-icon-size-4-font-size);
 }
 
 .amsterdam-icon--size-5 {
-  height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-size-5-line-height));
+  height: calc(var(--amsterdam-icon-size-5-font-size) * var(--amsterdam-icon-size-5-line-height));
 }
 
 .amsterdam-icon--size-5 svg {
-  height: var(--amsterdam-icon-spacious-size-5-font-size);
-  width: var(--amsterdam-icon-spacious-size-5-font-size);
+  height: var(--amsterdam-icon-size-5-font-size);
+  width: var(--amsterdam-icon-size-5-font-size);
 }
 
 .amsterdam-icon--size-6 {
-  height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-size-6-line-height));
+  height: calc(var(--amsterdam-icon-size-6-font-size) * var(--amsterdam-icon-size-6-line-height));
 }
 
 .amsterdam-icon--size-6 svg {
-  height: var(--amsterdam-icon-spacious-size-6-font-size);
-  width: var(--amsterdam-icon-spacious-size-6-font-size);
-}
-
-.amsterdam-theme--compact {
-  .amsterdam-icon--size-3 {
-    height: calc(var(--amsterdam-icon-compact-size-3-font-size) * var(--amsterdam-icon-compact-size-3-line-height));
-  }
-
-  .amsterdam-icon--size-3 svg {
-    height: var(--amsterdam-icon-compact-size-3-font-size);
-    width: var(--amsterdam-icon-compact-size-3-font-size);
-  }
-
-  .amsterdam-icon--size-4 {
-    height: calc(var(--amsterdam-icon-compact-size-4-font-size) * var(--amsterdam-icon-compact-size-4-line-height));
-  }
-
-  .amsterdam-icon--size-4 svg {
-    height: var(--amsterdam-icon-compact-size-4-font-size);
-    width: var(--amsterdam-icon-compact-size-4-font-size);
-  }
-
-  .amsterdam-icon--size-5 {
-    height: calc(var(--amsterdam-icon-compact-size-5-font-size) * var(--amsterdam-icon-compact-size-5-line-height));
-  }
-
-  .amsterdam-icon--size-5 svg {
-    height: var(--amsterdam-icon-compact-size-5-font-size);
-    width: var(--amsterdam-icon-compact-size-5-font-size);
-  }
-
-  .amsterdam-icon--size-6 {
-    height: calc(var(--amsterdam-icon-compact-size-6-font-size) * var(--amsterdam-icon-compact-size-6-line-height));
-  }
-
-  .amsterdam-icon--size-6 svg {
-    height: var(--amsterdam-icon-compact-size-6-font-size);
-    width: var(--amsterdam-icon-compact-size-6-font-size);
-  }
+  height: var(--amsterdam-icon-size-6-font-size);
+  width: var(--amsterdam-icon-size-6-font-size);
 }

package/src/components/link/link.scss

@@ -22,8 +22,8 @@
 
 .amsterdam-link--standalone {
   display: inline-block;
-  font-size: var(--amsterdam-link-standalone-spacious-font-size);
-  line-height: var(--amsterdam-link-standalone-spacious-line-height);
+  font-size: var(--amsterdam-link-standalone-font-size);
+  line-height: var(--amsterdam-link-standalone-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);
@@ -32,11 +32,6 @@
     text-decoration-thickness: var(--amsterdam-link-standalone-hover-text-decoration-thickness);
     text-underline-offset: var(--amsterdam-link-standalone-hover-text-underline-offset);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-standalone-compact-font-size);
-    line-height: var(--amsterdam-link-standalone-compact-line-height);
-  }
 }
 
 .amsterdam-link--inline {
@@ -57,34 +52,6 @@
   }
 }
 
-.amsterdam-link--in-list {
-  align-items: flex-start;
-  display: inline-flex;
-  font-size: var(--amsterdam-link-in-list-spacious-font-size);
-  gap: var(--amsterdam-link-in-list-gap);
-  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-line: var(--amsterdam-link-in-list-hover-text-decoration-line);
-  }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-in-list-compact-font-size);
-    line-height: var(--amsterdam-link-in-list-compact-line-height);
-  }
-}
-
-// Override for icon size
-.amsterdam-link--in-list__chevron {
-  span.amsterdam-icon svg {
-    height: 1rem;
-    width: 1rem;
-  }
-}
-
 .amsterdam-link--on-background-dark {
   color: var(--amsterdam-link-on-background-dark-color);
 

package/src/components/link-list/link-list.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2024 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset-list {
   box-sizing: border-box;
   list-style: none;
@@ -23,20 +25,15 @@
   color: var(--amsterdam-link-list-link-color);
   display: inline-flex;
   font-family: var(--amsterdam-link-list-link-font-family);
-  font-size: var(--amsterdam-link-list-link-spacious-medium-font-size);
+  font-size: var(--amsterdam-link-list-link-medium-font-size);
   font-weight: var(--amsterdam-link-list-link-font-weight);
   gap: var(--amsterdam-link-list-link-gap);
-  line-height: var(--amsterdam-link-list-link-spacious-medium-line-height);
+  line-height: var(--amsterdam-link-list-link-medium-line-height);
   outline-offset: var(--amsterdam-link-list-link-outline-offset);
   text-decoration-line: var(--amsterdam-link-list-link-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-link-list-link-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-link-list-link-text-underline-offset);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-medium-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-medium-line-height);
-  }
-
   &:hover {
     color: var(--amsterdam-link-list-link-hover-color);
     text-decoration-line: var(--amsterdam-link-list-link-hover-text-decoration-line);
@@ -44,23 +41,15 @@
 }
 
 .amsterdam-link-list__link--small {
-  font-size: var(--amsterdam-link-list-link-spacious-small-font-size);
-  line-height: var(--amsterdam-link-list-link-spacious-small-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-small-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-small-line-height);
-  }
+  font-size: var(--amsterdam-link-list-link-small-font-size);
+  line-height: var(--amsterdam-link-list-link-small-line-height);
 }
 
 .amsterdam-link-list__link--large {
-  font-size: var(--amsterdam-link-list-link-spacious-large-font-size);
-  line-height: var(--amsterdam-link-list-link-spacious-large-line-height);
+  font-size: var(--amsterdam-link-list-link-large-font-size);
+  line-height: var(--amsterdam-link-list-link-large-line-height);
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-link-list-link-compact-large-font-size);
-    line-height: var(--amsterdam-link-list-link-compact-large-line-height);
-  }
+  @include hyphenation;
 }
 
 .amsterdam-link-list__link--on-background-dark {

package/src/components/ordered-list/ordered-list.scss

@@ -24,9 +24,9 @@
 .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-spacious-font-size);
+  font-size: var(--amsterdam-ordered-list-font-size);
   font-weight: var(--amsterdam-ordered-list-font-weight);
-  line-height: var(--amsterdam-ordered-list-spacious-line-height);
+  line-height: var(--amsterdam-ordered-list-line-height);
   list-style-type: var(--amsterdam-ordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -45,8 +45,3 @@
     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/components/page-heading/page-heading.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,16 +16,12 @@
   break-inside: avoid;
   color: var(--amsterdam-page-heading-color);
   font-family: var(--amsterdam-page-heading-font-family);
-  font-size: var(--amsterdam-page-heading-spacious-font-size);
+  font-size: var(--amsterdam-page-heading-font-size);
   font-weight: var(--amsterdam-page-heading-font-weight);
-  line-height: var(--amsterdam-page-heading-spacious-line-height);
+  line-height: var(--amsterdam-page-heading-line-height);
 
+  @include hyphenation;
   @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/components/page-menu/page-menu.scss

@@ -34,10 +34,10 @@
   display: inline-flex;
   flex-direction: row;
   font-family: var(--amsterdam-page-menu-item-font-family);
-  font-size: var(--amsterdam-page-menu-item-spacious-font-size);
+  font-size: var(--amsterdam-page-menu-item-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-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   outline-offset: var(--amsterdam-page-menu-item-outline-offset);
   text-align: center;
   text-decoration-line: var(--amsterdam-page-menu-item-text-decoration-line);
@@ -45,11 +45,6 @@
   text-underline-offset: var(--amsterdam-page-menu-item-text-underline-offset);
   touch-action: manipulation;
   white-space: nowrap;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-page-menu-item-compact-font-size);
-    line-height: var(--amsterdam-page-menu-item-compact-line-height);
-  }
 }
 
 .amsterdam-page-menu__link {

package/src/components/pagination/pagination.scss

@@ -14,17 +14,12 @@
   display: flex;
   flex-wrap: wrap;
   font-family: var(--amsterdam-pagination-font-family);
-  font-size: var(--amsterdam-pagination-spacious-font-size);
+  font-size: var(--amsterdam-pagination-font-size);
   font-weight: var(--amsterdam-pagination-font-weight);
   justify-content: center;
-  line-height: var(--amsterdam-pagination-spacious-line-height);
+  line-height: var(--amsterdam-pagination-line-height);
 
   @include list-reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-pagination-compact-font-size);
-    line-height: var(--amsterdam-pagination-compact-line-height);
-  }
 }
 
 @mixin button-reset {

package/src/components/paragraph/paragraph.scss

@@ -12,36 +12,21 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-spacious-medium-font-size);
+  font-size: var(--amsterdam-paragraph-medium-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
-  line-height: var(--amsterdam-paragraph-spacious-medium-line-height);
+  line-height: var(--amsterdam-paragraph-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);
-  }
+  font-size: var(--amsterdam-paragraph-small-font-size);
+  line-height: var(--amsterdam-paragraph-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);
-  }
+  font-size: var(--amsterdam-paragraph-large-font-size);
+  line-height: var(--amsterdam-paragraph-large-line-height);
 }
 
 .amsterdam-paragraph--inverse-color {

package/src/components/search-field/search-field.scss

@@ -19,9 +19,9 @@
   box-shadow: var(--amsterdam-search-field-input-box-shadow);
   color: var(--amsterdam-search-field-input-color);
   font-family: var(--amsterdam-search-field-input-font-family);
-  font-size: var(--amsterdam-search-field-input-spacious-font-size);
+  font-size: var(--amsterdam-search-field-input-font-size);
   font-weight: var(--amsterdam-search-field-input-font-weight);
-  line-height: var(--amsterdam-search-field-input-spacious-line-height);
+  line-height: var(--amsterdam-search-field-input-line-height);
   outline-offset: var(--amsterdam-search-field-input-outline-offset);
   padding-block: 0.5rem;
   padding-inline: 1rem;
@@ -30,11 +30,6 @@
 
   @include reset;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-search-field-input-compact-font-size);
-    line-height: var(--amsterdam-search-field-input-compact-line-height);
-  }
-
   &:hover {
     box-shadow: var(--amsterdam-search-field-input-hover-box-shadow);
   }

package/src/components/skip-link/skip-link.scss

@@ -20,9 +20,4 @@
   &:hover {
     background-color: var(--amsterdam-skip-link-hover-background-color);
   }
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-skip-link-compact-font-size);
-    line-height: var(--amsterdam-skip-link-compact-line-height);
-  }
 }

package/src/components/text-input/text-input.scss

@@ -14,9 +14,9 @@
   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-size: var(--amsterdam-text-input-font-size);
   font-weight: var(--amsterdam-text-input-font-weight);
-  line-height: var(--amsterdam-text-input-spacious-line-height);
+  line-height: var(--amsterdam-text-input-line-height);
   outline-offset: var(--amsterdam-text-input-outline-offset);
   padding-block: 0.5rem;
   padding-inline: 1rem;
@@ -25,11 +25,6 @@
 
   @include reset;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-text-input-compact-font-size);
-    line-height: var(--amsterdam-text-input-compact-line-height);
-  }
-
   &:hover {
     box-shadow: var(--amsterdam-text-input-hover-box-shadow);
   }

package/src/components/top-task-link/top-task-link.scss

@@ -3,6 +3,8 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
+@import "../../common/hyphenation";
+
 .amsterdam-top-task-link {
   break-inside: avoid;
   display: flex;
@@ -20,18 +22,14 @@
 .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-size: var(--amsterdam-top-task-link-label-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);
 
-  .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 hyphenation;
   @include reset;
 }
 
@@ -43,14 +41,9 @@
 .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-size: var(--amsterdam-top-task-link-description-font-size);
   font-weight: var(--amsterdam-top-task-link-description-font-weight);
-  line-height: var(--amsterdam-top-task-link-description-spacious-line-height);
-
-  .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);
-  }
+  line-height: var(--amsterdam-top-task-link-description-line-height);
 
   @include reset;
 }

package/src/components/unordered-list/unordered-list.scss

@@ -24,9 +24,9 @@
 .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-size: var(--amsterdam-unordered-list-font-size);
   font-weight: var(--amsterdam-unordered-list-font-weight);
-  line-height: var(--amsterdam-unordered-list-spacious-line-height);
+  line-height: var(--amsterdam-unordered-list-line-height);
   list-style-type: var(--amsterdam-unordered-list-list-style-type);
 
   /** List items are responsible for indentation and marker positioning. */
@@ -45,8 +45,3 @@
     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);
-}