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

…803)
Amsterdam · Nov 28, 2023 · 9b087ec · 9b087ec
1 parent 930baf5
commit 9b087ec
Show file tree

Hide file tree

Showing 49 changed files with 734 additions and 640 deletions.
diff --git a/packages/css/src/accordion/accordion.scss b/packages/css/src/accordion/accordion.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-accordion__header {
   display: flex;
   margin-block: 0;
@@ -22,16 +20,17 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-narrow-font-size);
+  font-size: var(--amsterdam-accordion-button-spacious-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-line-height);
+  line-height: var(--amsterdam-accordion-button-spacious-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-accordion-button-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-accordion-button-compact-font-size);
+    line-height: var(--amsterdam-accordion-button-compact-line-height);
   }
 
   &:focus {

diff --git a/packages/css/src/alert/alert.scss b/packages/css/src/alert/alert.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-alert {
   align-items: flex-start;
   background-color: var(--amsterdam-alert-background-color);
@@ -30,12 +28,13 @@
 .amsterdam-alert__title {
   color: var(--amsterdam-alert-title-color);
   font-family: var(--amsterdam-alert-title-font-family);
-  font-size: var(--amsterdam-alert-title-narrow-font-size);
+  font-size: var(--amsterdam-alert-title-spacious-font-size);
   font-weight: var(--amsterdam-alert-title-font-weight);
-  line-height: var(--amsterdam-alert-title-line-height);
+  line-height: var(--amsterdam-alert-title-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-alert-title-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-alert-title-compact-font-size);
+    line-height: var(--amsterdam-alert-title-compact-line-height);
   }
 
   @include reset;

diff --git a/packages/css/src/blockquote/blockquote.scss b/packages/css/src/blockquote/blockquote.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -16,9 +14,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-narrow-font-size);
+  font-size: var(--amsterdam-blockquote-spacious-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-line-height);
+  line-height: var(--amsterdam-blockquote-spacious-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -29,8 +27,9 @@
     content: close-quote;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-blockquote-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-blockquote-spacious-font-size);
+    line-height: var(--amsterdam-blockquote-spacious-line-height);
   }
 
   @include reset;

diff --git a/packages/css/src/breadcrumb/breadcrumb.scss b/packages/css/src/breadcrumb/breadcrumb.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
@@ -14,12 +12,13 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-narrow-font-size);
+  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-line-height);
+  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-breadcrumb-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
   }
 }
 

diff --git a/packages/css/src/button/button.scss b/packages/css/src/button/button.scss
@@ -4,20 +4,21 @@
  */
 
 @import "../../node_modules/@utrecht/components/button/css";
-@import "../../utils/breakpoint";
 
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-narrow-font-size);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-button-wide-font-size);
-  }
+  font-size: var(--amsterdam-button-spacious-font-size);
+  line-height: var(--amsterdam-button-spacious-line-height);
 
   @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-breadcrumb-compact-font-size);
+    line-height: var(--amsterdam-breadcrumb-compact-line-height);
+  }
 }
 
 .amsterdam-button--secondary {

diff --git a/packages/css/src/checkbox/checkbox.scss b/packages/css/src/checkbox/checkbox.scss
@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 .amsterdam-checkbox__input {
   appearance: none;
   margin-block: 0;
@@ -21,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-checkmark-narrow-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height));
   width: 1.5rem;
 
   &::after {
@@ -34,8 +32,8 @@
     width: 100%;
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    height: calc(var(--amsterdam-checkbox-checkmark-wide-size) * var(--amsterdam-checkbox-checkmark-multiplier));
+  .amsterdam-theme--compact & {
+    height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height));
   }
 }
 
@@ -48,10 +46,10 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-narrow-font-size);
+  font-size: var(--amsterdam-checkbox-spacious-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-line-height);
+  line-height: var(--amsterdam-checkbox-spacious-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -65,8 +63,9 @@
     }
   }
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-checkbox-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-checkbox-compact-font-size);
+    line-height: var(--amsterdam-checkbox-compact-line-height);
   }
 
   @include reset;

diff --git a/packages/css/src/dialog/dialog.scss b/packages/css/src/dialog/dialog.scss
@@ -52,12 +52,13 @@
   color: var(--amsterdam-dialog-title-color);
   flex: auto;
   font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-narrow-font-size);
+  font-size: var(--amsterdam-dialog-title-spacious-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-line-height);
+  line-height: var(--amsterdam-dialog-title-spacious-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-dialog-title-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-dialog-title-compact-font-size);
+    line-height: var(--amsterdam-dialog-title-compact-line-height);
   }
 
   @include reset;

diff --git a/packages/css/src/form-label/form-label.scss b/packages/css/src/form-label/form-label.scss
@@ -3,22 +3,21 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-narrow-font-size);
+  font-size: var(--amsterdam-form-label-spacious-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-line-height);
-
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-form-label-wide-font-size);
-  }
+  line-height: var(--amsterdam-form-label-spacious-line-height);
 
   @include reset;
+
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-form-label-compact-font-size);
+    line-height: var(--amsterdam-form-label-compact-line-height);
+  }
 }
diff --git a/packages/css/src/grid/grid.scss b/packages/css/src/grid/grid.scss
@@ -6,8 +6,8 @@
 @import "../../utils/breakpoint";
 
 .amsterdam-grid {
-  --amsterdam-grid-gap: var(--amsterdam-grid-density-low-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-low-padding-inline);
+  --amsterdam-grid-gap: var(--amsterdam-grid-spacious-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-spacious-padding-inline);
 
   display: grid;
   gap: var(--amsterdam-grid-gap);
@@ -23,9 +23,9 @@
   }
 }
 
-.amsterdam-grid--density-high {
-  --amsterdam-grid-gap: var(--amsterdam-grid-density-high-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-density-high-padding-inline);
+.amsterdam-grid--compact {
+  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
+  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
 }
 
 .amsterdam-grid--padding-bottom--small {

diff --git a/packages/css/src/heading/heading.scss b/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,38 +20,42 @@
 }
 
 .amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-1-narrow-font-size);
-  line-height: var(--amsterdam-heading-1-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-1-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-1-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-1-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-1-font-size);
+    line-height: var(--amsterdam-heading-compact-level-1-line-height);
   }
 }
 
 .amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-2-narrow-font-size);
-  line-height: var(--amsterdam-heading-2-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-2-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-2-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-2-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-2-font-size);
+    line-height: var(--amsterdam-heading-compact-level-2-line-height);
   }
 }
 
 .amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-3-narrow-font-size);
-  line-height: var(--amsterdam-heading-3-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-3-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-3-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-3-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-3-font-size);
+    line-height: var(--amsterdam-heading-compact-level-3-line-height);
   }
 }
 
 .amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-4-narrow-font-size);
-  line-height: var(--amsterdam-heading-4-line-height);
+  font-size: var(--amsterdam-heading-spacious-level-4-font-size);
+  line-height: var(--amsterdam-heading-spacious-level-4-line-height);
 
-  @media screen and (min-width: $amsterdam-breakpoint-typography) {
-    font-size: var(--amsterdam-heading-4-wide-font-size);
+  .amsterdam-theme--compact & {
+    font-size: var(--amsterdam-heading-compact-level-4-font-size);
+    line-height: var(--amsterdam-heading-compact-level-4-line-height);
   }
 }