Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into feature/DES-582-button-refactor

.release-please-manifest.json

@@ -1,7 +1,7 @@
 {
-  "packages/css": "0.3.0",
-  "packages/react": "0.3.0",
-  "proprietary/assets": "0.1.6",
-  "proprietary/react-icons": "0.1.11",
-  "proprietary/tokens": "0.3.0"
+  "packages/css": "0.5.0",
+  "packages/react": "0.5.0",
+  "proprietary/assets": "0.1.7",
+  "proprietary/react-icons": "0.1.12",
+  "proprietary/tokens": "0.5.0"
 }

packages/css/CHANGELOG.md

@@ -3,6 +3,21 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [0.5.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]) (2024-02-09)
+
+
+### ⚠ BREAKING CHANGES
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064))
+
+### Features
+
+* Add theme setup and compact theme ([#1067](https://github.com/Amsterdam/design-system/issues/1067)) ([e773434](https://github.com/Amsterdam/design-system/commit/e7734347a9e7205d510a16a543294bde69b9c6f0))
+* Hyphenate headings and other large text components ([#1056](https://github.com/Amsterdam/design-system/issues/1056)) ([f875171](https://github.com/Amsterdam/design-system/commit/f8751716018d4ed269a086e1764741ad29714fa0))
+* Remove deprecated ‘in list’ variant of Link ([#1064](https://github.com/Amsterdam/design-system/issues/1064)) ([b30784b](https://github.com/Amsterdam/design-system/commit/b30784b352b4a057069ceb397951b79a6e2547f2))
+
+
 ## [0.4.0](https://github.com/Amsterdam/design-system/compare/@amsterdam/[email protected]...@amsterdam/[email protected]) (2024-01-31)
 
 ### ⚠ BREAKING CHANGES

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";
+```

packages/css/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.4.0",
+  "version": "0.5.0",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",

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

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 {

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;
 }

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 {

packages/css/src/components/button/button.scss

@@ -8,64 +8,12 @@
 }
 
 .amsterdam-button {
-  border: none;
-  cursor: var(--amsterdam-action-activate-cursor);
-  display: inline-flex;
-  font-family: var(--amsterdam-button-font-family);
-  font-size: var(--amsterdam-button-spacious-font-size);
-  gap: var(--amsterdam-button-gap);
-  line-height: var(--amsterdam-button-spacious-line-height);
-  outline-offset: var(--amsterdam-button-outline-offset);
-  padding-block: var(--amsterdam-button-padding-block-start) var(--amsterdam-button-padding-block-end);
-  padding-inline: var(--amsterdam-button-padding-inline-start) var(--amsterdam-button-padding-inline-end);
-  touch-action: manipulation;
-
-  .amsterdam-theme--compact & {
-    font-size: var(--amsterdam-breadcrumb-compact-font-size);
-    line-height: var(--amsterdam-breadcrumb-compact-line-height);
-  }
-
-  &:hover {
-    cursor: var(--amsterdam-action-activate-cursor);
-  }
-
-  &:disabled,
-  &[aria-disabled="true"] {
-    cursor: var(--amsterdam-action-disabled-cursor);
-  }
+  font-size: var(--amsterdam-button-font-size);
+  line-height: var(--amsterdam-button-line-height);
 
   @include reset;
 }
 
-@mixin amsterdam-button-forced-color-mode {
-  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
-    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
-  }
-}
-
-.amsterdam-button--busy:hover {
-  cursor: var(--amsterdam-action-busy-cursor);
-}
-
-.amsterdam-button--primary {
-  background-color: var(--amsterdam-button-primary-background-color);
-  box-shadow: var(--amsterdam-button-primary-box-shadow);
-  color: var(--amsterdam-button-primary-color);
-
-  &:disabled,
-  [aria-disabled="true"] {
-    background-color: var(--amsterdam-button-primary-disabled-background-color);
-    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
-  }
-
-  &:hover:not(:disabled, [aria-disabled="true"]) {
-    background-color: var(--amsterdam-button-primary-hover-background-color);
-    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
-  }
-
-  @include amsterdam-button-forced-color-mode;
-}
-
 .amsterdam-button--secondary {
   background-color: var(--amsterdam-button-secondary-background-color);
   box-shadow: var(--amsterdam-button-secondary-box-shadow);

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;
 }
 

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 {

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

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;
 }

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;

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 {