feat!: Add theme setup and compact theme (#1067)

Amsterdam · Feb 9, 2024 · e773434 · e773434
1 parent b30784b
commit e773434
Show file tree

Hide file tree

Showing 65 changed files with 389 additions and 826 deletions.
diff --git a/packages/css/README.md b/packages/css/README.md
@@ -38,3 +38,14 @@ export default class ExamplePage extends React.Component {
   }
 }
 ```
+
+## Compact mode
+
+For applications, the large text and ample white space of the theme can be counterproductive.
+That’s why there is a compact mode.
+To use the compact mode, import the compact css **after** theme css, like so:
+
+```javascript
+import "@amsterdam/design-system-tokens/dist/index.css";
+import "@amsterdam/design-system-tokens/dist/compact.css";
+```
diff --git a/packages/css/src/components/accordion/accordion.scss b/packages/css/src/components/accordion/accordion.scss
@@ -20,19 +20,14 @@
   cursor: pointer;
   display: flex;
   font-family: var(--amsterdam-accordion-button-font-family);
-  font-size: var(--amsterdam-accordion-button-spacious-font-size);
+  font-size: var(--amsterdam-accordion-button-font-size);
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
-  line-height: var(--amsterdam-accordion-button-spacious-line-height);
+  line-height: var(--amsterdam-accordion-button-line-height);
   padding-block: 0.75rem;
   padding-inline: 1rem;
   width: 100%;
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-accordion-button-compact-font-size);
-    line-height: var(--amsterdam-accordion-button-compact-line-height);
-  }
-
   &:focus {
     outline-offset: var(--amsterdam-accordion-button-focus-outline-offset);
   }

diff --git a/packages/css/src/components/badge/badge.scss b/packages/css/src/components/badge/badge.scss
@@ -6,15 +6,10 @@
 .amsterdam-badge {
   display: inline-block;
   font-family: var(--amsterdam-badge-font-family);
-  font-size: var(--amsterdam-badge-spacious-font-size);
+  font-size: var(--amsterdam-badge-font-size);
   font-weight: var(--amsterdam-badge-font-weight);
-  line-height: var(--amsterdam-badge-spacious-line-height);
+  line-height: var(--amsterdam-badge-line-height);
   padding-inline: var(--amsterdam-badge-padding-inline);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-badge-compact-font-size);
-    line-height: var(--amsterdam-badge-compact-line-height);
-  }
 }
 
 .amsterdam-badge--blue {

diff --git a/packages/css/src/components/blockquote/blockquote.scss b/packages/css/src/components/blockquote/blockquote.scss
@@ -16,9 +16,9 @@
   break-inside: avoid;
   color: var(--amsterdam-blockquote-color);
   font-family: var(--amsterdam-blockquote-font-family);
-  font-size: var(--amsterdam-blockquote-spacious-font-size);
+  font-size: var(--amsterdam-blockquote-font-size);
   font-weight: var(--amsterdam-blockquote-font-weight);
-  line-height: var(--amsterdam-blockquote-spacious-line-height);
+  line-height: var(--amsterdam-blockquote-line-height);
   quotes: "“" "”";
 
   &::before {
@@ -29,11 +29,6 @@
     content: close-quote;
   }
 
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-blockquote-spacious-font-size);
-    line-height: var(--amsterdam-blockquote-spacious-line-height);
-  }
-
   @include hyphenation;
   @include reset;
 }

diff --git a/packages/css/src/components/breadcrumb/breadcrumb.scss b/packages/css/src/components/breadcrumb/breadcrumb.scss
@@ -12,14 +12,9 @@
 
 .amsterdam-breadcrumb {
   font-family: var(--amsterdam-breadcrumb-font-family, inherit);
-  font-size: var(--amsterdam-breadcrumb-spacious-font-size);
+  font-size: var(--amsterdam-breadcrumb-font-size);
   font-weight: var(--amsterdam-breadcrumb-font-weight);
-  line-height: var(--amsterdam-breadcrumb-spacious-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
-  }
+  line-height: var(--amsterdam-breadcrumb-line-height);
 }
 
 .amsterdam-breadcrumb__list {

diff --git a/packages/css/src/components/button/button.scss b/packages/css/src/components/button/button.scss
@@ -10,15 +10,10 @@
 }
 
 .amsterdam-button {
-  font-size: var(--amsterdam-button-spacious-font-size);
-  line-height: var(--amsterdam-button-spacious-line-height);
+  font-size: var(--amsterdam-button-font-size);
+  line-height: var(--amsterdam-button-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/components/checkbox/checkbox.scss b/packages/css/src/components/checkbox/checkbox.scss
@@ -19,7 +19,7 @@
   align-items: center;
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--amsterdam-checkbox-spacious-font-size) * var(--amsterdam-checkbox-spacious-line-height));
+  height: calc(var(--amsterdam-checkbox-font-size) * var(--amsterdam-checkbox-line-height));
   width: 1.5rem;
 
   &::after {
@@ -31,10 +31,6 @@
     height: 1.5rem;
     width: 100%;
   }
-
-  .amsterdam-theme--compact & {
-    height: calc(var(--amsterdam-checkbox-compact-font-size) * var(--amsterdam-checkbox-compact-line-height));
-  }
 }
 
 @mixin reset {
@@ -46,10 +42,10 @@
   cursor: pointer;
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
-  font-size: var(--amsterdam-checkbox-spacious-font-size);
+  font-size: var(--amsterdam-checkbox-font-size);
   font-weight: 400;
   gap: 0.5rem;
-  line-height: var(--amsterdam-checkbox-spacious-line-height);
+  line-height: var(--amsterdam-checkbox-line-height);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -63,11 +59,6 @@
     }
   }
 
-  .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/components/dialog/dialog.scss b/packages/css/src/components/dialog/dialog.scss
@@ -53,17 +53,12 @@
   color: var(--amsterdam-dialog-title-color);
   flex: auto;
   font-family: var(--amsterdam-dialog-title-font-family);
-  font-size: var(--amsterdam-dialog-title-spacious-font-size);
+  font-size: var(--amsterdam-dialog-title-font-size);
   font-weight: var(--amsterdam-dialog-title-font-weight);
-  line-height: var(--amsterdam-dialog-title-spacious-line-height);
+  line-height: var(--amsterdam-dialog-title-line-height);
 
   @include hyphenation;
   @include reset;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-dialog-title-compact-font-size);
-    line-height: var(--amsterdam-dialog-title-compact-line-height);
-  }
 }
 
 .amsterdam-dialog__footer {

diff --git a/packages/css/src/components/form-label/form-label.scss b/packages/css/src/components/form-label/form-label.scss
@@ -12,15 +12,10 @@
 .amsterdam-form-label {
   color: var(--amsterdam-form-label-color);
   font-family: var(--amsterdam-form-label-font-family);
-  font-size: var(--amsterdam-form-label-spacious-font-size);
+  font-size: var(--amsterdam-form-label-font-size);
   font-weight: var(--amsterdam-form-label-font-weight);
-  line-height: var(--amsterdam-form-label-spacious-line-height);
+  line-height: var(--amsterdam-form-label-line-height);
 
   @include hyphenation;
   @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/components/grid/grid.scss b/packages/css/src/components/grid/grid.scss
@@ -6,9 +6,6 @@
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
-  --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);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
@@ -23,11 +20,6 @@
   }
 }
 
-.amsterdam-grid--compact {
-  --amsterdam-grid-gap: var(--amsterdam-grid-compact-gap);
-  --amsterdam-grid-padding-inline: var(--amsterdam-grid-compact-padding-inline);
-}
-
 .amsterdam-grid--gap-vertical--none {
   row-gap: initial;
 }

diff --git a/packages/css/src/components/header/header.scss b/packages/css/src/components/header/header.scss
@@ -75,9 +75,9 @@
   border: 0;
   color: var(--amsterdam-page-menu-item-color);
   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);
-  line-height: var(--amsterdam-page-menu-item-spacious-line-height);
+  line-height: var(--amsterdam-page-menu-item-line-height);
   margin-block: 0;
   padding-inline: 0 30px;
   text-align: center;

diff --git a/packages/css/src/components/heading/heading.scss b/packages/css/src/components/heading/heading.scss
@@ -23,63 +23,33 @@
 }
 
 .amsterdam-heading--1 {
-  font-size: var(--amsterdam-heading-spacious-level-1-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-1-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-1-font-size);
-    line-height: var(--amsterdam-heading-compact-level-1-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-1-font-size);
+  line-height: var(--amsterdam-heading-level-1-line-height);
 }
 
 .amsterdam-heading--2 {
-  font-size: var(--amsterdam-heading-spacious-level-2-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-2-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-2-font-size);
-    line-height: var(--amsterdam-heading-compact-level-2-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-2-font-size);
+  line-height: var(--amsterdam-heading-level-2-line-height);
 }
 
 .amsterdam-heading--3 {
-  font-size: var(--amsterdam-heading-spacious-level-3-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-3-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-3-font-size);
-    line-height: var(--amsterdam-heading-compact-level-3-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-3-font-size);
+  line-height: var(--amsterdam-heading-level-3-line-height);
 }
 
 .amsterdam-heading--4 {
-  font-size: var(--amsterdam-heading-spacious-level-4-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-4-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-4-font-size);
-    line-height: var(--amsterdam-heading-compact-level-4-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-4-font-size);
+  line-height: var(--amsterdam-heading-level-4-line-height);
 }
 
 .amsterdam-heading--5 {
-  font-size: var(--amsterdam-heading-spacious-level-5-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-5-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-5-font-size);
-    line-height: var(--amsterdam-heading-compact-level-5-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-5-font-size);
+  line-height: var(--amsterdam-heading-level-5-line-height);
 }
 
 .amsterdam-heading--6 {
-  font-size: var(--amsterdam-heading-spacious-level-6-font-size);
-  line-height: var(--amsterdam-heading-spacious-level-6-line-height);
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-heading-compact-level-6-font-size);
-    line-height: var(--amsterdam-heading-compact-level-6-line-height);
-  }
+  font-size: var(--amsterdam-heading-level-6-font-size);
+  line-height: var(--amsterdam-heading-level-6-line-height);
 }
 
 .amsterdam-heading--inverse-color {

diff --git a/packages/css/src/components/icon/icon.scss b/packages/css/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);
 }