feat!: Update typography system and values, implement compact theme

packages/css/src/heading/heading.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -22,39 +20,23 @@
 }
 
 .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);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-1-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-1-line-height);
 }
 
 .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);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-2-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-2-line-height);
 }
 
 .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);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-3-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-3-line-height);
 }
 
 .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);
-  }
+  font-size: var(--amsterdam-heading-density-low-level-4-font-size);
+  line-height: var(--amsterdam-heading-density-low-level-4-line-height);
 }
 
 .amsterdam-heading--inverse-color {

packages/css/src/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,13 +14,9 @@
   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-density-low-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-density-low-line-height);
 
   @include reset;
 }

packages/css/src/paragraph/paragraph.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,33 +12,21 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-narrow-font-size);
+  font-size: var(--amsterdam-paragraph-density-low-medium-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);
-  }
+  line-height: var(--amsterdam-paragraph-density-low-medium-line-height);
 
   @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);
-  }
+  font-size: var(--amsterdam-paragraph-density-low-small-font-size);
+  line-height: var(--amsterdam-paragraph-density-low-small-line-height);
 }
 
 .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);
-  }
+  font-size: var(--amsterdam-paragraph-density-low-large-font-size);
+  line-height: var(--amsterdam-paragraph-density-low-large-line-height);
 }
 
 .amsterdam-paragraph--inverse-color {

proprietary/tokens/src/brand/amsterdam/typography.tokens.json

@@ -6,6 +6,78 @@
         "normal": { "value": 400 },
         "bold": { "value": 800 }
       },
+      "density-low": {
+        "text-level": {
+          "0": {
+            "font-size": { "value": "clamp(1.802rem, 2.479vw + 1.009rem, 4.578rem)" },
+            "line-height": { "value": "1.1" }
+          },
+          "1": {
+            "font-size": { "value": "clamp(1.602rem, 1.839vw + 1.013rem, 3.662rem)" },
+            "line-height": { "value": "1.2" }
+          },
+          "2": {
+            "font-size": { "value": "clamp(1.424rem, 1.345vw + 0.994rem, 2.93rem)" },
+            "line-height": { "value": "1.3" }
+          },
+          "3": {
+            "font-size": { "value": "clamp(1.266rem, 0.962vw + 0.958rem, 2.344rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "4": {
+            "font-size": { "value": "clamp(1.125rem, 0.67vw + 0.911rem, 1.875rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "5": {
+            "font-size": { "value": "clamp(1.25rem, 0.558vw + 1.071rem, 1.875rem)" },
+            "line-height": { "value": "1.5" }
+          },
+          "6": {
+            "font-size": { "value": "clamp(1rem, 0.446vw + 0.857rem, 1.5rem)" },
+            "line-height": { "value": "1.6" }
+          },
+          "7": {
+            "font-size": { "value": "clamp(0.8rem, 0.357vw + 0.686rem, 1.2rem)" },
+            "line-height": { "value": "1.6" }
+          }
+        }
+      },
+      "density-high": {
+        "text-level": {
+          "0": {
+            "font-size": { "value": "clamp(1.577rem, 1.657vw + 1.047rem, 3.433rem)" },
+            "line-height": { "value": "1.1" }
+          },
+          "1": {
+            "font-size": { "value": "clamp(1.402rem, 1.201vw + 1.018rem, 2.747rem)" },
+            "line-height": { "value": "1.2" }
+          },
+          "2": {
+            "font-size": { "value": "clamp(1.246rem, 0.849vw + 0.974rem, 2.197rem)" },
+            "line-height": { "value": "1.3" }
+          },
+          "3": {
+            "font-size": { "value": "clamp(1.107rem, 0.581vw + 0.921rem, 1.758rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "4": {
+            "font-size": { "value": "clamp(0.984rem, 0.377vw + 0.863rem, 1.406rem)" },
+            "line-height": { "value": "1.4" }
+          },
+          "5": {
+            "font-size": { "value": "clamp(1.094rem, 0.279vw + 1.005rem, 1.406rem)" },
+            "line-height": { "value": "1.5" }
+          },
+          "6": {
+            "font-size": { "value": "clamp(0.875rem, 0.223vw + 0.804rem, 1.125rem)" },
+            "line-height": { "value": "1.6" }
+          },
+          "7": {
+            "font-size": { "value": "clamp(0.7rem, 0.179vw + 0.643rem, 0.9rem)" },
+            "line-height": { "value": "1.6" }
+          }
+        }
+      },
       "text-level": {
         "0": {
           "narrow": {

proprietary/tokens/src/components/amsterdam/heading.tokens.json

@@ -5,40 +5,72 @@
       "font-family": { "value": "{amsterdam.typography.font-family}" },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
       "inverse-color": { "value": "{amsterdam.color.primary-white}" },
-      "1": {
-        "line-height": { "value": "{amsterdam.typography.text-level.1.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.1.narrow.font-size}" }
+      "density-high": {
+        "level-1": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.1.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.1.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.1.wide.font-size}" }
-        }
-      },
-      "2": {
-        "line-height": { "value": "{amsterdam.typography.text-level.2.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.2.narrow.font-size}" }
+        "level-2": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.2.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.2.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.2.wide.font-size}" }
-        }
-      },
-      "3": {
-        "line-height": { "value": "{amsterdam.typography.text-level.3.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.3.narrow.font-size}" }
+        "level-3": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.3.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.3.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.3.wide.font-size}" }
+        "level-4": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-high.text-level.4.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-high.text-level.4.font-size}"
+          }
         }
       },
-      "4": {
-        "line-height": { "value": "{amsterdam.typography.text-level.4.line-height}" },
-        "narrow": {
-          "font-size": { "value": "{amsterdam.typography.text-level.4.narrow.font-size}" }
+      "density-low": {
+        "level-1": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.1.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.1.font-size}"
+          }
+        },
+        "level-2": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.2.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.2.font-size}"
+          }
+        },
+        "level-3": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.3.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.3.font-size}"
+          }
         },
-        "wide": {
-          "font-size": { "value": "{amsterdam.typography.text-level.4.wide.font-size}" }
+        "level-4": {
+          "line-height": {
+            "value": "{amsterdam.typography.density-low.text-level.4.line-height}"
+          },
+          "font-size": {
+            "value": "{amsterdam.typography.density-low.text-level.4.font-size}"
+          }
         }
       }
     }

proprietary/tokens/src/components/amsterdam/page-heading.tokens.json

@@ -3,15 +3,24 @@
     "page-heading": {
       "color": { "value": "{amsterdam.color.primary-black}" },
       "font-family": { "value": "{amsterdam.typography.font-family}" },
-      "line-height": { "value": "{amsterdam.typography.text-level.0.line-height}" },
-      "narrow": {
-        "font-size": { "value": "{amsterdam.typography.text-level.0.narrow.font-size}" }
-      },
-      "wide": {
-        "font-size": { "value": "{amsterdam.typography.text-level.0.wide.font-size}" }
-      },
       "font-weight": { "value": "{amsterdam.typography.font-weight.bold}" },
-      "inverse-color": { "value": "{amsterdam.color.primary-white}" }
+      "inverse-color": { "value": "{amsterdam.color.primary-white}" },
+      "density-high": {
+        "font-size": {
+          "value": "{amsterdam.typography.density-high.text-level.0.font-size}"
+        },
+        "line-height": {
+          "value": "{amsterdam.typography.density-high.text-level.0.font-size}"
+        }
+      },
+      "density-low": {
+        "font-size": {
+          "value": "{amsterdam.typography.density-low.text-level.0.font-size}"
+        },
+        "line-height": {
+          "value": "{amsterdam.typography.density-low.text-level.0.font-size}"
+        }
+      }
     }
   }
 }