@amsterdam/design-system-css 0.1.9 → 0.2.0

package/dist/unordered-list/unordered-list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAiBA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,2DACA,wDACA,wDACA,gEAEA,yCARF,qEASI,0DAIF,qGACE,6EACA,+EAKJ,iFACE,+EAEA,iHACE,4FACA","file":"unordered-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,6DACA,wDACA,iEACA,gEAGA,qGACE,6EACA,+EAKJ,iFACE,+EAEA,iHACE,4FACA,8FAIJ,+FACE,4DACA","file":"unordered-list.css"}

package/dist/visually-hidden/visually-hidden.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAKA,2BACE,8BACA,qBACA,WACA,kBACA,mBACA,gBACA,gBACA,iBACA,kBACA","file":"visually-hidden.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/visually-hidden/visually-hidden.scss"],"names":[],"mappings":"AAKA,2BACE,8BACA,qBACA,WACA,kBACA,mBACA,gBACA,gBACA,iBACA,kBACA","file":"visually-hidden.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.1.9",
+  "version": "0.2.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",
@@ -14,16 +14,16 @@
     "directory": "packages/css"
   },
   "scripts": {
-    "build": "sass src/:dist/ --style=compressed",
-    "build:watch": "sass src/:dist/ --watch",
+    "build": "sass src/components:dist/ --style=compressed",
+    "build:watch": "sass src/components:dist/ --watch",
     "clean": "rimraf dist/"
   },
   "devDependencies": {
-    "@amsterdam/design-system-tokens": "0.1.8",
+    "@amsterdam/design-system-tokens": "0.2.0",
     "sass": "1.69.5"
   },
   "dependencies": {
     "@utrecht/components": "2.0.0"
   },
-  "gitHead": "930baf5f841a4a368c75a7e72e96838ce3f09c79"
+  "gitHead": "de071558a849af9c0f7b1a442b255a1a42d78f2f"
 }

package/{utils → src/common}/breakpoint.scss

@@ -8,12 +8,6 @@
  * We to resort to Sass variables for our breakpoint values.
  */
 
-/**
- * The breakpoint for typography is 854px = 53.375rems.
- * @deprecated To be replaced with the grid breakpoints.
-*/
-$amsterdam-breakpoint-typography: 53.375rem;
-
 /** The breakpoint at which medium screens start. */
 $amsterdam-breakpoint-medium: 36rem;
 

package/src/{accordion → components/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 {

package/src/{alert → components/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;

package/src/{blockquote → components/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;

package/src/{breadcrumb → components/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);
   }
 }
 
@@ -34,26 +33,27 @@
   @include reset;
 }
 
-.amsterdam-breadcrumb-item {
+.amsterdam-breadcrumb__item {
   align-items: center;
   display: flex;
 }
 
-.amsterdam-breadcrumb-item:not(:last-child)::after {
-  background-color: var(--amsterdam-breadcrumb-color);
+.amsterdam-breadcrumb__item:not(:last-child)::after {
+  background-color: var(--amsterdam-breadcrumb-separator-background-color);
   clip-path: path("M 4.725,16 3.275,14.545 9.815,8 3.275,1.455 4.725,0 l 8,8 z");
   content: "";
   display: inline-block;
-  height: 16px;
+  height: 1rem;
   margin-inline-start: 1rem;
-  width: 16px;
+  width: 1rem;
 }
 
-.amsterdam-breadcrumb-item__link {
-  color: var(--amsterdam-breadcrumb-color);
-  cursor: pointer;
+.amsterdam-breadcrumb__link {
+  color: var(--amsterdam-breadcrumb-item-link-color);
   outline-offset: var(--amsterdam-breadcrumb-item-link-outline-offset);
-  text-decoration: none;
+  text-decoration-line: var(--amsterdam-breadcrumb-item-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-breadcrumb-item-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-breadcrumb-item-link-text-underline-offset);
 
   &::first-letter {
     text-transform: capitalize;
@@ -61,8 +61,6 @@
 
   &:hover {
     color: var(--amsterdam-breadcrumb-item-link-hover-color);
-    text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
+    text-decoration-line: var(--amsterdam-breadcrumb-item-link-hover-text-decoration-line);
   }
 }

package/src/{button → components/button}/button.scss

@@ -3,21 +3,22 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../node_modules/@utrecht/components/button/css";
-@import "../../utils/breakpoint";
+@import "../../../node_modules/@utrecht/components/button/css";
 
 @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 {

package/src/{card → components/card}/card.scss

@@ -45,12 +45,12 @@
 
 .amsterdam-card__link {
   color: var(--amsterdam-card-link-color);
-  text-decoration: none;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-line: var(--amsterdam-card-link-text-decoration-line);
+  text-decoration-thickness: var(--amsterdam-card-link-text-decoration-thickness);
+  text-underline-offset: var(--amsterdam-card-link-text-underline-offset);
 
   &:hover {
     color: var(--amsterdam-card-link-hover-color);
-    text-decoration: underline;
+    text-decoration-line: var(--amsterdam-card-link-hover-text-decoration-line);
   }
 }

package/src/{checkbox → components/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;

package/src/{dialog → components/dialog}/dialog.scss

@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
+@import "../../common/breakpoint";
 
 .amsterdam-dialog {
   background-color: var(--amsterdam-dialog-background-color);
@@ -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;

package/src/{form-label → components/form-label}/form-label.scss

@@ -3,8 +3,6 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
@@ -12,13 +10,14 @@
 .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);
+  }
 }

package/src/{grid → components/grid}/grid-cell.scss

@@ -3,7 +3,7 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
+@import "../../common/breakpoint";
 
 .amsterdam-grid-cell--full-width {
   grid-column: 1 / -1;

package/src/{grid → components/grid}/grid.scss

@@ -3,11 +3,11 @@
  * Copyright (c) 2023 Gemeente Amsterdam
  */
 
-@import "../../utils/breakpoint";
+@import "../../common/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,17 @@
   }
 }
 
-.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--gap-vertical--small {
+  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+}
+
+.amsterdam-grid--gap-vertical--large {
+  row-gap: calc(var(--amsterdam-grid-gap) * 2);
 }
 
 .amsterdam-grid--padding-bottom--small {

package/src/components/heading/heading.scss

@@ -0,0 +1,64 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-heading {
+  break-after: avoid;
+  break-inside: avoid;
+  color: var(--amsterdam-heading-color);
+  font-family: var(--amsterdam-heading-font-family);
+  font-weight: var(--amsterdam-heading-font-weight);
+
+  @include reset;
+}
+
+.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);
+  }
+}
+
+.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);
+  }
+}
+
+.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);
+  }
+}
+
+.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);
+  }
+}
+
+.amsterdam-heading--inverse-color {
+  color: var(--amsterdam-heading-inverse-color);
+}

package/src/components/icon/icon.scss

@@ -0,0 +1,105 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-icon {
+  align-items: center;
+  display: inline-flex;
+}
+
+.amsterdam-icon svg {
+  fill: currentColor;
+}
+
+.amsterdam-icon--size-3 {
+  height: calc(var(--amsterdam-icon-spacious-size-3-font-size) * var(--amsterdam-icon-spacious-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);
+}
+
+.amsterdam-icon--size-4 {
+  height: calc(var(--amsterdam-icon-spacious-size-4-font-size) * var(--amsterdam-icon-spacious-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);
+}
+
+.amsterdam-icon--size-5 {
+  height: calc(var(--amsterdam-icon-spacious-size-5-font-size) * var(--amsterdam-icon-spacious-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);
+}
+
+.amsterdam-icon--size-6 {
+  height: calc(var(--amsterdam-icon-spacious-size-6-font-size) * var(--amsterdam-icon-spacious-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-icon--size-7 {
+  height: calc(var(--amsterdam-icon-spacious-size-7-font-size) * var(--amsterdam-icon-spacious-size-7-line-height));
+}
+
+.amsterdam-icon--size-7 svg {
+  height: var(--amsterdam-icon-spacious-size-7-font-size);
+  width: var(--amsterdam-icon-spacious-size-7-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);
+  }
+
+  .amsterdam-icon--size-7 {
+    height: calc(var(--amsterdam-icon-compact-size-7-font-size) * var(--amsterdam-icon-compact-size-7-line-height));
+  }
+
+  .amsterdam-icon--size-7 svg {
+    height: var(--amsterdam-icon-compact-size-7-font-size);
+    width: var(--amsterdam-icon-compact-size-7-font-size);
+  }
+}