@amsterdam/design-system-css 0.7.1 → 0.8.0

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/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/form-field-character-counter.scss

@@ -3,9 +3,7 @@
  * Copyright Gemeente Amsterdam
  */
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
+@import "../../common/text-rendering";
 
 .ams-form-field-character-counter {
   color: var(--ams-form-field-character-counter-color);
@@ -14,7 +12,7 @@
   font-weight: var(--ams-form-field-character-counter-font-weight);
   line-height: var(--ams-form-field-character-counter-line-height);
 
-  @include reset;
+  @include text-rendering;
 }
 
 .ams-form-field-character-counter--error {

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,8 +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";
@@ -37,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;
 }
 

package/src/components/radio/radio.scss

@@ -5,6 +5,7 @@
 
 @import "../../common/input-label-focus";
 @import "../../common/hide-input";
+@import "../../common/text-rendering";
 
 .ams-radio__input {
   @include hide-input;
@@ -25,7 +26,7 @@
     border-color: var(--ams-radio-circle-border-color);
     border-radius: 100%;
     border-style: solid;
-    border-width: 0.125rem;
+    border-width: var(--ams-radio-circle-border-width);
     box-sizing: border-box;
     content: "";
     height: 1.5rem;
@@ -33,10 +34,6 @@
   }
 }
 
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
 .ams-radio__label {
   color: var(--ams-radio-color);
   cursor: pointer;
@@ -51,7 +48,7 @@
   &:hover {
     color: var(--ams-radio-hover-color);
     text-decoration-line: underline;
-    text-decoration-thickness: 0.125rem;
+    text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness);
     text-underline-offset: 0.375rem;
 
     .ams-radio__circle::after {
@@ -59,7 +56,7 @@
     }
   }
 
-  @include reset;
+  @include text-rendering;
 }
 
 // Default checked
@@ -84,7 +81,7 @@
 
     .ams-radio__circle::after {
       border-color: var(--ams-radio-circle-disabled-border-color);
-      border-width: 0.125rem;
+      border-width: var(--ams-radio-circle-disabled-border-width);
     }
   }
 }

package/src/components/screen/screen.scss

@@ -8,9 +8,14 @@
 }
 
 .ams-screen {
+  background-color: var(--ams-screen-background-color);
+  margin-inline: auto;
+
   @include reset;
+}
 
-  margin-inline: auto;
+.ams-screen--full-height {
+  min-height: 100vh;
 }
 
 .ams-screen--wide {

package/src/components/search-field/search-field.scss

@@ -3,19 +3,25 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 .ams-search-field {
   display: flex;
   isolation: isolate; // create new stacking context, so the input’s z-index doesn’t escape the component
 }
 
-@mixin reset {
+@mixin reset-input {
+  // 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;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-search-field__input {
-  border: none;
+  background-color: var(--ams-search-field-input-background-color);
   box-shadow: var(--ams-search-field-input-box-shadow);
   color: var(--ams-search-field-input-color);
   font-family: var(--ams-search-field-input-font-family);
@@ -28,7 +34,8 @@
   touch-action: manipulation;
   width: 100%;
 
-  @include reset;
+  @include text-rendering;
+  @include reset-input;
 
   &:hover {
     box-shadow: var(--ams-search-field-input-hover-box-shadow);
@@ -52,9 +59,16 @@
   width: var(--ams-search-field-input-cancel-button-width);
 }
 
+@mixin reset-button {
+  border: 0;
+
+  // Reset margins added by Safari on iOS
+  margin-block: 0;
+  margin-inline: 0;
+}
+
 .ams-search-field__button {
   background-color: var(--ams-search-field-button-background-color);
-  border: 0;
   color: var(--ams-search-field-button-color);
   cursor: pointer;
   outline-offset: var(--ams-search-field-button-outline-offset);
@@ -64,6 +78,8 @@
   padding-inline: var(--ams-search-field-button-padding-inline);
   touch-action: manipulation;
 
+  @include reset-button;
+
   &:hover {
     background-color: var(--ams-search-field-button-hover-background-color);
   }

package/src/components/select/README.md

@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# Select
+
+A form control that allows users to select one or more options from a list.
+
+## References
+
+- [MDN Web Docs](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select)