@amsterdam/design-system-css 0.1.3 → 0.1.5

package/src/page-menu/page-menu.scss

@@ -0,0 +1,77 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+@mixin reset-list {
+  box-sizing: border-box;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+@mixin reset-item {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+}
+
+@mixin reset-button {
+  background-color: transparent;
+  border: 0;
+  margin-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-page-menu {
+  align-items: center;
+  column-gap: var(--amsterdam-page-menu-column-gap);
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  list-style: none;
+  row-gap: var(--amsterdam-page-menu-row-gap);
+
+  @include reset-list;
+}
+
+@mixin page-menu-item {
+  color: var(--amsterdam-page-menu-item-color);
+  display: inline-flex;
+  flex-direction: row;
+  font-family: var(--amsterdam-page-menu-item-font-family);
+  font-size: var(--amsterdam-page-menu-item-narrow-font-size);
+  font-weight: var(--amsterdam-page-menu-item-narrow-font-weight);
+  gap: var(--amsterdam-page-menu-item-gap);
+  line-height: var(--amsterdam-page-menu-item-line-height);
+  text-align: center;
+  text-decoration: var(--amsterdam-page-menu-item-text-decoration);
+  touch-action: manipulation;
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-page-menu-item-wide-font-size);
+  }
+}
+
+.amsterdam-page-menu__link {
+  @include page-menu-item;
+  @include reset-item;
+}
+
+.amsterdam-page-menu__button {
+  cursor: pointer;
+
+  @include reset-item;
+  @include reset-button;
+  @include page-menu-item;
+}
+
+.amsterdam-page-menu__link:hover,
+.amsterdam-page-menu__button:hover {
+  color: var(--amsterdam-page-menu-item-hover-color);
+}
+
+.amsterdam-page-menu__link svg,
+.amsterdam-page-menu__button svg {
+  color: currentColor;
+}

package/src/paragraph/paragraph.scss

@@ -2,6 +2,7 @@
  * @license EUPL-1.2+
  * Copyright (c) 2023 Gemeente Amsterdam
  */
+
 @import "../../utils/breakpoint";
 
 @mixin reset {
@@ -13,31 +14,35 @@
 .amsterdam-paragraph {
   color: var(--amsterdam-paragraph-color);
   font-family: var(--amsterdam-paragraph-font-family);
-  font-size: var(--amsterdam-paragraph-font-size-narrow);
+  font-size: var(--amsterdam-paragraph-narrow-font-size);
   font-weight: var(--amsterdam-paragraph-font-weight);
   line-height: var(--amsterdam-paragraph-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-paragraph-font-size-wide);
+    font-size: var(--amsterdam-paragraph-wide-font-size);
   }
 
   @include reset;
 }
 
-.amsterdam-paragraph-small {
-  font-size: var(--amsterdam-paragraph-small-font-size-narrow);
+.amsterdam-paragraph--small {
+  font-size: var(--amsterdam-paragraph-small-narrow-font-size);
   line-height: var(--amsterdam-paragraph-small-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-paragraph-small-font-size-wide);
+    font-size: var(--amsterdam-paragraph-small-wide-font-size);
   }
 }
 
-.amsterdam-paragraph-large {
-  font-size: var(--amsterdam-paragraph-large-font-size-narrow);
+.amsterdam-paragraph--large {
+  font-size: var(--amsterdam-paragraph-large-narrow-font-size);
   line-height: var(--amsterdam-paragraph-large-line-height);
 
   @media screen and (width > $amsterdam-breakpoint) {
-    font-size: var(--amsterdam-paragraph-large-font-size-wide);
+    font-size: var(--amsterdam-paragraph-large-wide-font-size);
   }
 }
+
+.amsterdam-paragraph--inverse-color {
+  color: var(--amsterdam-paragraph-inverse-color);
+}

package/src/top-task-link/README.md

@@ -0,0 +1,13 @@
+# Top task link
+
+De toptask link is een navigatie-element dat opvallender is dan een link, om de aandacht te trekken voor de meest belangrijke informatie.
+Zet de toptask link in zodat de gebruiker snel de juiste informatie vindt én een bijbehorende taak makkelijk kan uitvoeren.
+
+## Richtlijnen
+
+- Een toptask link moet een titel hebben. Hou deze titel zo kort mogelijk, hij mag maximaal over 2 regels lopen.
+- Een toptask link kan een omschrijving hebben, maar dat is niet verplicht. De omschrijving staat onder de titel en is ook maximaal 2 regels.
+
+## Relevante WCAG eisen
+
+Voor de toptask link gelden dezelfde eisen als voor [reguliere links](https://amsterdam.github.io/design-system/?path=/docs/react_link--docs).

package/src/top-task-link/top-task-link.scss

@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+.amsterdam-top-task-link {
+  break-inside: avoid;
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+  outline-offset: var(--amsterdam-top-task-link-outline-offset);
+  text-decoration: none;
+}
+
+@mixin reset {
+  box-sizing: border-box;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-top-task-link__label {
+  color: var(--amsterdam-top-task-link-label-color);
+  font-family: var(--amsterdam-top-task-link-label-font-family);
+  font-size: var(--amsterdam-top-task-link-label-narrow-font-size);
+  font-weight: var(--amsterdam-top-task-link-label-font-weight);
+  line-height: var(--amsterdam-top-task-link-label-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-top-task-link-label-wide-font-size);
+  }
+
+  @include reset;
+}
+
+.amsterdam-top-task-link:hover .amsterdam-top-task-link__label {
+  color: var(--amsterdam-top-task-link-label-hover-color);
+  text-decoration: underline;
+  text-decoration-thickness: 3px;
+  text-underline-offset: 0.5rem;
+}
+
+.amsterdam-top-task-link__description {
+  color: var(--amsterdam-top-task-link-description-color);
+  font-family: var(--amsterdam-top-task-link-description-font-family);
+  font-size: var(--amsterdam-top-task-link-description-narrow-font-size);
+  font-weight: var(--amsterdam-top-task-link-description-font-weight);
+  line-height: var(--amsterdam-top-task-link-description-line-height);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-top-task-link-description-wide-font-size);
+  }
+
+  @include reset;
+}

package/src/unordered-list/README.md

@@ -0,0 +1,7 @@
+# Unordered list
+
+Een lijst is een verticale groep gerelateerde inhoud.
+Deze lijst kan 2 niveaus hebben.
+Het eerste niveau bestaat uit vierkantjes.
+Het tweede niveau bestaat uit halve kastlijntjes.
+Tekst in de lijstitems springt een vaste afstand in.

package/src/unordered-list/unordered-list.scss

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+@import "../../utils/breakpoint";
+
+/** Apply border box sizing, reset whitespace and list styles. */
+@mixin reset {
+  box-sizing: border-box;
+  list-style: none;
+  margin-block: 0;
+  padding-inline-start: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+/** A list is a grid column with a gap between items. */
+.amsterdam-unordered-list {
+  @include reset;
+
+  display: grid;
+  gap: var(--amsterdam-unordered-list-gap);
+}
+
+/** A list with markers sets typography for its text content. */
+.amsterdam-unordered-list:not(.amsterdam-unordered-list--no-markers) {
+  color: var(--amsterdam-unordered-list-color);
+  font-family: var(--amsterdam-unordered-list-font-family);
+  font-size: var(--amsterdam-unordered-list-narrow-font-size);
+  font-weight: var(--amsterdam-unordered-list-font-weight);
+  line-height: var(--amsterdam-unordered-list-line-height);
+  list-style-type: var(--amsterdam-unordered-list-list-style-type);
+
+  @media screen and (width > $amsterdam-breakpoint) {
+    font-size: var(--amsterdam-unordered-list-wide-font-size);
+  }
+
+  /** List items are responsible for indentation and marker positioning. */
+  .amsterdam-unordered-list__item {
+    margin-inline-start: var(--amsterdam-unordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-unordered-list-item-padding-inline-start);
+  }
+}
+
+/** A nested list has a different marker and less indentation for correct alignment. */
+:is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-unordered-list {
+  list-style-type: var(--amsterdam-unordered-list-unordered-list-list-style-type);
+
+  .amsterdam-unordered-list__item {
+    margin-inline-start: var(--amsterdam-unordered-list-unordered-list-item-margin-inline-start);
+    padding-inline-start: var(--amsterdam-unordered-list-unordered-list-item-padding-inline-start);
+  }
+}

package/src/visually-hidden/README.md

@@ -0,0 +1,5 @@
+# Visually hidden
+
+Het visually hidden component kan gebruikt worden om inhoud te verbergen voor ziende gebruikers, maar beschikbaar te houden voor niet-visuele _user agents_, zoals schermlezers.
+
+Let op: In de overgrote meerderheid van de gevallen moet inhoud die visueel beschikbaar is, ook beschikbaar zijn voor niet-visuele _user agents_, en omgekeerd. Uitgebreide aanwijzingen of instructies die alleen door niet-visuele _user agents_ worden gelezen, doen al snel meer kwaad dan goed.

package/src/visually-hidden/visually-hidden.scss

@@ -0,0 +1,17 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright (c) 2023 Gemeente Amsterdam
+ */
+
+.amsterdam-visually-hidden {
+  clip: rect(1px, 1px, 1px, 1px);
+  clip-path: inset(50%);
+  height: 1px;
+  margin-block: -1px;
+  margin-inline: -1px;
+  overflow: hidden;
+  padding-block: 0;
+  padding-inline: 0;
+  position: absolute;
+  width: 1px;
+}

package/dist/details/details.css

@@ -1,62 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-/*
-  The breakpoint is 854px / 16 = 53.375rems
-  https://developer.mozilla.org/en-US/docs/Web/CSS/@media#accessibility_concerns
-*/
-.amsterdam-details__summary {
-  color: var(--amsterdam-details-summary-color);
-  cursor: pointer;
-  display: flex;
-  font-family: var(--amsterdam-details-summary-font-family);
-  font-size: var(--amsterdam-details-summary-font-size-narrow);
-  font-weight: var(--amsterdam-details-summary-font-weight);
-  justify-content: space-between;
-  line-height: var(--amsterdam-details-summary-line-height);
-  padding-block: 0.75rem;
-  padding-inline: 1rem;
-  box-sizing: border-box;
-}
-@media screen and (width > 53.375rem) {
-  .amsterdam-details__summary {
-    font-size: var(--amsterdam-details-summary-font-size-wide);
-  }
-}
-.amsterdam-details__summary:focus {
-  outline-offset: var(--amsterdam-details-summary-focus-outline-offset);
-}
-.amsterdam-details__summary:focus, .amsterdam-details__summary:hover {
-  box-shadow: var(--amsterdam-details-summary-hover-box-shadow);
-}
-.amsterdam-details__summary span svg {
-  transform: rotate(0deg);
-  transition: transform 0.3s ease;
-}
-
-.amsterdam-details__summary h1,
-.amsterdam-details__summary h2,
-.amsterdam-details__summary h3,
-.amsterdam-details__summary h4 {
-  font-size: inherit;
-  font-weight: inherit;
-  line-height: inherit;
-  margin-block: 0;
-  margin-inline: 0;
-}
-
-.amsterdam-details[open] .amsterdam-details__summary span svg {
-  transform: rotate(180deg);
-}
-
-.amsterdam-details__content {
-  padding-block: 1rem;
-  padding-inline: 1rem;
-}
-
-/*# sourceMappingURL=details.css.map */

package/dist/details/details.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/details/details.scss","../../utils/breakpoint.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;ACAA;AAAA;AAAA;AAAA;AAKA;AAAA;AAAA;AAAA;ADKA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EAbA;;AAeA;EAZF;IAaI;;;AAGF;EACE;;AAGF;EAEE;;AAGF;EACE;EAGA;;;AAMJ;AAAA;AAAA;AAAA;EAIE;EACA;EACA;EACA;EACA;;;AAIA;EACE;;;AAIJ;EACE;EACA","file":"details.css"}

package/dist/list/list.css

@@ -1,12 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
- */
-.amsterdam-list {
-  list-style: none;
-  margin-block: 0;
-  padding-inline: 0;
-  box-sizing: border-box;
-}
-
-/*# sourceMappingURL=list.css.map */

package/dist/list/list.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/list/list.scss"],"names":[],"mappings":"AAAA;AAAA;AAAA;AAAA;AASA;EACE;EACA;EACA;EANA","file":"list.css"}