@amsterdam/design-system-css 0.7.0 → 0.8.0

package/src/components/button/button.scss

@@ -3,12 +3,13 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
+@import "../../common/text-rendering";
+
+@mixin reset-button {
+  border: 0;
 }
 
 .ams-button {
-  border: none;
   cursor: var(--ams-button-cursor);
   display: inline-flex;
   font-family: var(--ams-button-font-family);
@@ -25,12 +26,13 @@
     cursor: var(--ams-button-disabled-cursor);
   }
 
-  @include reset;
+  @include text-rendering;
+  @include reset-button;
 }
 
 @mixin ams-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
+    border: var(--ams-button-forced-color-mode-border); // add border because forced colors changes box-shadow to none
   }
 }
 

package/src/components/checkbox/checkbox.scss

@@ -5,6 +5,7 @@
 
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
+@import "../../common/text-rendering";
 
 .ams-checkbox__input {
   @include hide-input;
@@ -24,7 +25,7 @@
     background-size: 1rem;
     border-color: var(--ams-checkbox-checkmark-border-color);
     border-style: solid;
-    border-width: 0.125rem;
+    border-width: var(--ams-checkbox-checkmark-border-width);
     box-sizing: border-box;
     content: "";
     height: 1.5rem;
@@ -32,10 +33,6 @@
   }
 }
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
 .ams-checkbox__label {
   color: var(--ams-checkbox-color);
   cursor: pointer;
@@ -50,16 +47,16 @@
   &:hover {
     color: var(--ams-checkbox-hover-color);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
     text-underline-offset: 0.375rem;
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-hover-border-color);
-      border-width: 0.1875rem;
+      border-width: var(--ams-checkbox-checkmark-hover-border-width);
     }
   }
 
-  @include reset;
+  @include text-rendering;
 }
 
 // Default checked
@@ -67,7 +64,7 @@
   + .ams-checkbox__label .ams-checkbox__checkmark::after {
     background-color: var(--ams-checkbox-checkmark-checked-background-color);
     background-image: var(--ams-checkbox-checkmark-checked-background-image);
-    border: none;
+    border: 0;
   }
 }
 
@@ -79,7 +76,7 @@
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
-    border: none;
+    border: 0;
   }
 }
 
@@ -99,7 +96,7 @@
 
     .ams-checkbox__checkmark::after {
       border-color: var(--ams-checkbox-checkmark-disabled-border-color);
-      border-width: 0.125rem;
+      border-width: var(--ams-checkbox-checkmark-disabled-border-width);
     }
   }
 }

package/src/components/date-input/README.md

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Date Input
+
+Helps users enter a date.
+
+## Visual considerations
+
+This component uses a native date input, which is styled differently in different browsers and operating systems.
+Recreating the native functionality is quite difficult and prone to accessibility errors, which is why we’ve chosen not to do that.
+This does mean that this component does not look identical on all browsers and operating systems.

package/src/components/date-input/date-input.scss

@@ -0,0 +1,78 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset {
+  // Reset native appearance, this causes issues on iOS and Android devices
+  -webkit-appearance: none;
+  appearance: none;
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.ams-date-input {
+  background-color: var(--ams-date-input-background-color);
+  box-shadow: var(--ams-date-input-box-shadow);
+  color: var(--ams-date-input-color);
+  font-family: var(--ams-date-input-font-family);
+  font-size: var(--ams-date-input-font-size);
+  font-weight: var(--ams-date-input-font-weight);
+  line-height: var(--ams-date-input-line-height);
+
+  // Set min height for iOS, otherwise an empty box is a lot smaller than a filled one.
+  min-height: calc(
+    (var(--ams-date-input-font-size) * var(--ams-date-input-line-height)) + 2 * var(--ams-date-input-padding-block)
+  );
+
+  // Set min width for iOS, so the width is closer to the filled in width.
+  min-width: calc(8ch + (2 * var(--ams-date-input-padding-inline)));
+  outline-offset: var(--ams-date-input-outline-offset);
+  padding-block: var(--ams-date-input-padding-block);
+  padding-inline: var(--ams-date-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--ams-date-input-hover-box-shadow);
+  }
+}
+
+// This changes the default calendar icon on Chromium browsers only
+.ams-date-input::-webkit-calendar-picker-indicator {
+  appearance: none;
+  background-image: var(--ams-date-input-calender-picker-indicator-background-image);
+  cursor: pointer;
+}
+
+.ams-date-input:hover::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-hover-calender-picker-indicator-background-image);
+}
+
+.ams-date-input:disabled {
+  background-color: var(--ams-date-input-disabled-background-color);
+  box-shadow: var(--ams-date-input-disabled-box-shadow);
+  color: var(--ams-date-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-date-input:disabled::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-date-input-disabled-calender-picker-indicator-background-image);
+  visibility: visible;
+}
+
+.ams-date-input:invalid,
+.ams-date-input[aria-invalid="true"] {
+  box-shadow: var(--ams-date-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
+  }
+}

package/src/components/description-list/README.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Description List
+
+A collection of terms and their details.
+
+## Design
+
+On a narrow screen, details appear indented below their term.
+From the medium breakpoint, terms and details appear next to each other.
+The column for the details is twice as wide as the one for the term.
+
+Details are set in bold text.
+
+## References
+
+- [MDN: `<dl>`: The Description List element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl)
+- [WCAG: Using description lists](https://www.w3.org/WAI/WCAG22/Techniques/html/H40)

package/src/components/description-list/description-list.scss

@@ -0,0 +1,55 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/breakpoint";
+@import "../../common/text-rendering";
+
+@mixin reset {
+  box-sizing: border-box;
+  margin-block: 0;
+}
+
+.ams-description-list {
+  color: var(--ams-description-list-color);
+  display: grid;
+  font-family: var(--ams-description-list-font-family);
+  font-size: var(--ams-description-list-font-size);
+  font-weight: var(--ams-description-list-font-weight);
+  gap: var(--ams-description-list-gap);
+  line-height: var(--ams-description-list-line-height);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-template-columns: 1fr 2fr;
+  }
+
+  @include reset;
+  @include text-rendering;
+}
+
+.ams-description-list--inverse-color {
+  color: var(--ams-description-list-inverse-color);
+}
+
+.ams-description-list__term {
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 1;
+  }
+}
+
+@mixin reset-details {
+  margin-inline: 0;
+}
+
+.ams-description-list__details {
+  font-weight: var(--ams-description-list-details-font-weight);
+  padding-inline-start: var(--ams-description-list-details-padding-inline-start);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    grid-column-start: 2;
+    padding-inline-start: 0;
+  }
+
+  @include reset-details;
+}

package/src/components/dialog/dialog.scss

@@ -4,7 +4,6 @@
  */
 
 @import "../../common/breakpoint";
-@import "../../common/hyphenation";
 
 .ams-dialog {
   background-color: var(--ams-dialog-background-color);
@@ -44,22 +43,7 @@
   align-items: flex-start;
   display: flex;
   gap: var(--ams-dialog-header-gap);
-}
-
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
-.ams-dialog__title {
-  color: var(--ams-dialog-title-color);
-  flex: auto;
-  font-family: var(--ams-dialog-title-font-family);
-  font-size: var(--ams-dialog-title-font-size);
-  font-weight: var(--ams-dialog-title-font-weight);
-  line-height: var(--ams-dialog-title-line-height);
-
-  @include hyphenation;
-  @include reset;
+  justify-content: space-between;
 }
 
 .ams-dialog__footer {

package/src/components/document/document.scss

@@ -0,0 +1,14 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset-body {
+  margin-block: 0;
+  margin-inline: 0;
+}
+
+// Add this class if you haven’t removed the default margin on the `<body>` element.
+.ams-body {
+  @include reset-body;
+}

package/src/components/fieldset/fieldset.scss

@@ -4,9 +4,10 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 @mixin reset {
-  border: none;
+  border: 0;
   margin-inline: 0;
   padding-block: 0;
   padding-inline: 0;
@@ -16,9 +17,8 @@
   @include reset;
 }
 
-@mixin legend-reset {
+@mixin reset-legend {
   padding-inline: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-fieldset__legend {
@@ -30,5 +30,6 @@
   margin-block-end: 1rem; /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
 
   @include hyphenation;
-  @include legend-reset;
+  @include text-rendering;
+  @include reset-legend;
 }

package/src/components/form-field-character-counter/README.md

@@ -0,0 +1,19 @@
+<!-- @license CC0-1.0 -->
+
+# Form Field Character Counter
+
+Help users know how much text they can enter when there is a limit on the number of characters.
+
+Users will get updates at a pace that works best for the way they interact with the textarea. This means:
+
+- sighted users will see a count message that updates as they type
+- screen reader users will hear the count announcement when they stop typing.
+
+This component does not restrict the user from entering information. The user can enter more than the character limit, but are told they’ve entered too many characters. This lets them type or copy and paste their full answer, then edit it down.
+
+## Guidelines
+
+- Only use a character counter when there is a good reason for limiting the number of characters users can enter.
+  For example, if there is an indication that users are likely to enter more information than they need to.
+  Or when there is a legal or technical reason that means an entry must be no more than a certain number of characters.
+- If your users keep hitting the character limit imposed by the backend of your service then try to increase the limit rather than use a character counter.

package/src/components/form-field-character-counter/form-field-character-counter.scss

@@ -0,0 +1,20 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+.ams-form-field-character-counter {
+  color: var(--ams-form-field-character-counter-color);
+  font-family: var(--ams-form-field-character-counter-font-family);
+  font-size: var(--ams-form-field-character-counter-font-size);
+  font-weight: var(--ams-form-field-character-counter-font-weight);
+  line-height: var(--ams-form-field-character-counter-line-height);
+
+  @include text-rendering;
+}
+
+.ams-form-field-character-counter--error {
+  color: var(--ams-form-field-character-counter-error-color);
+}

package/src/components/heading/heading.scss

@@ -4,11 +4,11 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-heading {
@@ -19,6 +19,7 @@
   font-weight: var(--ams-heading-font-weight);
 
   @include hyphenation;
+  @include text-rendering;
   @include reset;
 }
 

package/src/components/index.scss

@@ -4,6 +4,13 @@
  */
 
 /* Append here */
+@import "./select/select";
+@import "./time-input/time-input";
+@import "./date-input/date-input";
+@import "./document/document";
+@import "./avatar/avatar";
+@import "./form-field-character-counter/form-field-character-counter";
+@import "./description-list/description-list";
 @import "./row/row";
 @import "./radio/radio";
 @import "./tabs/tabs";
@@ -35,7 +42,7 @@
 @import "./button/button";
 @import "./card/card";
 @import "./checkbox/checkbox";
-@import "./form-label/form-label";
+@import "./label/label";
 @import "./grid/grid";
 @import "./heading/heading";
 @import "./spotlight/spotlight";

package/src/components/{form-label → label}/README.md

@@ -1,6 +1,6 @@
 <!-- @license CC0-1.0 -->
 
-# Form Label
+# Label
 
 Describes a form control.
 

package/src/components/label/label.scss

@@ -0,0 +1,18 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+.ams-label {
+  color: var(--ams-label-color);
+  font-family: var(--ams-label-font-family);
+  font-size: var(--ams-label-font-size);
+  font-weight: var(--ams-label-font-weight);
+  line-height: var(--ams-label-line-height);
+
+  @include hyphenation;
+  @include text-rendering;
+}

package/src/components/link/link.scss

@@ -3,9 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
+@import "../../common/text-rendering";
 
 .ams-link {
   color: var(--ams-link-color);
@@ -17,7 +15,7 @@
     color: var(--ams-link-hover-color);
   }
 
-  @include reset;
+  @include text-rendering;
 }
 
 .ams-link--standalone {

package/src/components/link-list/link-list.scss

@@ -4,20 +4,21 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 @mixin reset-list {
   box-sizing: border-box;
   list-style: none;
   margin-block: 0;
   padding-inline-start: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-link-list {
-  @include reset-list;
-
   display: grid;
   gap: var(--ams-link-list-gap);
+
+  @include text-rendering;
+  @include reset-list;
 }
 
 .ams-link-list__link {

package/src/components/ordered-list/ordered-list.scss

@@ -3,21 +3,23 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 /** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style-type: none;
   margin-block: 0;
   padding-inline-start: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 /** A list is a grid column with a gap between items. */
 .ams-ordered-list {
-  @include reset;
-
   display: grid;
   gap: var(--ams-ordered-list-gap);
+
+  @include text-rendering;
+  @include reset;
 }
 
 /** A list with markers sets typography for its text content. */

package/src/components/page-heading/page-heading.scss

@@ -4,11 +4,11 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-page-heading {
@@ -21,6 +21,7 @@
   line-height: var(--ams-page-heading-line-height);
 
   @include hyphenation;
+  @include text-rendering;
   @include reset;
 }
 

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

@@ -3,6 +3,8 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset-list {
   box-sizing: border-box;
   margin-block: 0;
@@ -11,7 +13,6 @@
 
 @mixin reset-item {
   box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-page-menu {
@@ -19,6 +20,7 @@
   column-gap: var(--ams-page-menu-column-gap);
   display: flex;
   flex-direction: row;
+  flex-wrap: wrap;
   list-style: none;
   row-gap: var(--ams-page-menu-row-gap);
 
@@ -29,6 +31,10 @@
   justify-content: end;
 }
 
+.ams-page-menu--no-wrap {
+  flex-wrap: nowrap;
+}
+
 @mixin page-menu-item {
   color: var(--ams-page-menu-item-color);
   display: inline-flex;
@@ -49,6 +55,7 @@
 
 .ams-page-menu__link {
   @include page-menu-item;
+  @include text-rendering;
   @include reset-item;
 }
 

package/src/components/pagination/pagination.scss

@@ -3,7 +3,9 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin list-reset {
+@import "../../common/text-rendering";
+
+@mixin reset-list {
   list-style-type: none;
   margin-block: 0;
   padding-inline-start: 0;
@@ -19,20 +21,19 @@
   justify-content: center;
   line-height: var(--ams-pagination-line-height);
 
-  @include list-reset;
+  @include reset-list;
 }
 
-@mixin button-reset {
+@mixin reset-button {
   all: unset;
   box-sizing: border-box;
   outline: revert;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-pagination__button {
   /* The reset is included at the top of the block here, if you set it
   at the bottom `all: unset` overrides the `gap` property. */
-  @include button-reset;
+  @include reset-button;
 
   cursor: pointer;
   display: flex;
@@ -58,6 +59,8 @@
     height: 1rem;
     width: 1rem;
   }
+
+  @include text-rendering;
 }
 
 .ams-pagination__button--current {

package/src/components/paragraph/paragraph.scss

@@ -3,10 +3,11 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-paragraph {
@@ -16,6 +17,7 @@
   font-weight: var(--ams-paragraph-font-weight);
   line-height: var(--ams-paragraph-medium-line-height);
 
+  @include text-rendering;
   @include reset;
 }