@amsterdam/design-system-css 0.7.1 → 0.9.0

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/README.md

@@ -15,6 +15,7 @@ Pagination indicates the current page and allows users to navigate to other page
 - Redirect users to the first page if they enter a URL with a page number that doesn’t exist.
 - Pagination can be combined with a counter at the top of the page indicating “Page # of ##.”
 - Start a page with an overview list at the top after changing the page.
+- Make sure that the visible and accessible labels for the ‘previous’ and ‘next’ buttons convey the same meaning at all times – e.g. don’t update one and forget the other.
 
 ## Relevant WCAG Rules
 

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;
@@ -55,9 +56,11 @@
 
   // Override for icon size
   span.ams-icon svg {
-    height: 1rem;
-    width: 1rem;
+    block-size: 1rem;
+    inline-size: 1rem;
   }
+
+  @include text-rendering;
 }
 
 .ams-pagination__button--current {

package/src/components/paragraph/paragraph.scss

@@ -3,19 +3,21 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-paragraph {
   color: var(--ams-paragraph-color);
   font-family: var(--ams-paragraph-font-family);
-  font-size: var(--ams-paragraph-medium-font-size);
+  font-size: var(--ams-paragraph-font-size);
   font-weight: var(--ams-paragraph-font-weight);
-  line-height: var(--ams-paragraph-medium-line-height);
+  line-height: var(--ams-paragraph-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;
@@ -13,30 +14,26 @@
 
 .ams-radio__circle {
   align-items: center;
+  block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
   display: flex;
   flex-shrink: 0;
-  height: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
-  width: 1.5rem;
+  inline-size: 1.5rem;
 
   &::after {
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
+    block-size: 1.5rem;
     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;
-    width: 100%;
+    inline-size: 100%;
   }
 }
 
-@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,15 +8,20 @@
 }
 
 .ams-screen {
+  background-color: var(--ams-screen-background-color);
+  margin-inline: auto;
+
   @include reset;
+}
 
-  margin-inline: auto;
+.ams-screen--full-height {
+  min-block-size: 100vh;
 }
 
 .ams-screen--wide {
-  max-width: var(--ams-screen-wide-max-width);
+  max-inline-size: var(--ams-screen-wide-max-inline-size);
 }
 
 .ams-screen--x-wide {
-  max-width: var(--ams-screen-x-wide-max-width);
+  max-inline-size: var(--ams-screen-x-wide-max-inline-size);
 }

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

@@ -3,32 +3,38 @@
  * 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 {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  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);
   font-size: var(--ams-search-field-input-font-size);
   font-weight: var(--ams-search-field-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-search-field-input-line-height);
   outline-offset: var(--ams-search-field-input-outline-offset);
   padding-block: var(--ams-search-field-input-padding-block);
   padding-inline: var(--ams-search-field-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
-  @include reset;
+  @include text-rendering;
+  @include reset-input;
 
   &:hover {
     box-shadow: var(--ams-search-field-input-hover-box-shadow);
@@ -39,22 +45,40 @@
   }
 }
 
+.ams-search-field__input:invalid,
+.ams-search-field__input[aria-invalid="true"] {
+  box-shadow: var(--ams-search-field-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
+  }
+}
+
 .ams-search-field__input::placeholder {
   color: var(--ams-search-field-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-search-field__input::-webkit-search-cancel-button {
   appearance: none;
   background-image: var(--ams-search-field-input-cancel-button-background-image);
+  block-size: var(--ams-search-field-input-cancel-button-block-size);
   cursor: pointer;
-  height: var(--ams-search-field-input-cancel-button-height);
+  inline-size: var(--ams-search-field-input-cancel-button-inline-size);
   margin-inline-start: 0.5rem;
-  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 +88,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)

package/src/components/select/select.scss

@@ -0,0 +1,62 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  appearance: none; // Reset native appearance to hide default chevron
+  border: 0;
+  border-radius: 0; // Reset rounded borders for Safari on MacOS
+}
+
+.ams-select {
+  background-color: var(--ams-select-background-color);
+  box-shadow: var(--ams-select-box-shadow);
+  color: var(--ams-select-color);
+  font-family: var(--ams-select-font-family);
+  font-size: var(--ams-select-font-size);
+  font-weight: var(--ams-select-font-weight);
+  inline-size: 100%;
+  line-height: var(--ams-select-line-height);
+  outline-offset: var(--ams-select-outline-offset);
+  padding-block: var(--ams-select-padding-block);
+  padding-inline: var(--ams-select-padding-inline);
+  touch-action: manipulation;
+
+  &:not([multiple]) {
+    background-image: var(--ams-select-background-image);
+    background-position: var(--ams-select-background-position);
+    background-repeat: no-repeat;
+    background-size: 1em 1em;
+  }
+
+  &:hover {
+    box-shadow: var(--ams-select-hover-box-shadow);
+  }
+
+  @include reset;
+}
+
+.ams-select:invalid,
+.ams-select[aria-invalid="true"] {
+  box-shadow: var(--ams-select-invalid-box-shadow);
+}
+
+.ams-select:disabled {
+  box-shadow: var(--ams-select-disabled-box-shadow);
+  color: var(--ams-select-disabled-color);
+  cursor: not-allowed;
+
+  &:not([multiple]) {
+    background-image: var(--ams-select-disabled-background-image);
+  }
+}
+
+.ams-select:invalid:hover,
+.ams-select[aria-invalid="true"]:hover {
+  box-shadow: var(--ams-select-invalid-hover-box-shadow);
+}
+
+.ams-select__option:disabled {
+  color: var(--ams-select-option-disabled-color);
+}

package/src/components/switch/switch.scss

@@ -16,29 +16,31 @@
 }
 
 .ams-switch__label {
+  --ams-switch-track-padding: 0.0625rem;
+
   background-color: var(--ams-switch-background-color);
-  border-radius: calc(var(--ams-switch-thumb-width) * 2);
+  border-radius: calc(var(--ams-switch-thumb-inline-size) * 2);
   cursor: pointer;
   display: inline-block;
+  inline-size: var(--ams-switch-inline-size);
   outline-offset: var(--ams-switch-outline-offset);
-  padding-block: 1px;
-  padding-inline: 1px;
+  padding-block: var(--ams-switch-track-padding);
+  padding-inline: var(--ams-switch-track-padding);
   transition: background-color 0.2s ease-in-out;
-  width: var(--ams-switch-width);
 
   @include reset;
 }
 
 .ams-switch__label::before {
   background-color: var(--ams-switch-thumb-background-color);
+  block-size: var(--ams-switch-thumb-block-size);
   border-radius: 50%;
   content: "";
   display: block;
-  height: var(--ams-switch-thumb-height);
+  inline-size: var(--ams-switch-thumb-inline-size);
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
-  width: var(--ams-switch-thumb-width);
 }
 
 .ams-switch__input:checked + .ams-switch__label {
@@ -51,10 +53,11 @@
 }
 
 .ams-switch__input:checked + .ams-switch__label::before {
-  // The 2px is to account for the 1px padding-inline on the label
-  transform: translate(calc(var(--ams-switch-width) - var(--ams-switch-thumb-width) - 2px));
+  transform: translate(
+    calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding))
+  );
 }
 
 .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {
-  box-shadow: 0 0 0 2px var(--ams-switch-thumb-hover-color);
+  box-shadow: var(--ams-switch-thumb-hover-box-shadow);
 }

package/src/components/table/table.scss

@@ -24,7 +24,7 @@
 
 .ams-table__cell,
 .ams-table__header-cell {
-  border-bottom: var(--ams-table-cell-border-bottom);
+  border-block-end: var(--ams-table-cell-border-block-end);
   padding-block: var(--ams-table-cell-padding-block);
   padding-inline: var(--ams-table-cell-padding-inline);
   text-align: start;

package/src/components/tabs/tabs.scss

@@ -5,15 +5,19 @@
 
 @import "../../common/breakpoint";
 
+@mixin reset-button {
+  background-color: transparent;
+  border: 0;
+}
+
 .ams-tabs__list {
-  border-bottom: var(--ams-tabs-list-border-bottom);
+  background-color: var(--ams-tabs-list-background-color);
+  border-block-end: var(--ams-tabs-list-border-block-end);
   display: flex;
   overflow-x: auto;
 }
 
 .ams-tabs__button {
-  background-color: var(--ams-tabs-button-background-color);
-  border: var(--ams-tabs-button-border);
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
   font-family: var(--ams-tabs-button-font-family);
@@ -24,6 +28,8 @@
   padding-block: var(--ams-tabs-button-padding-block);
   padding-inline: var(--ams-tabs-button-padding-inline);
 
+  @include reset-button;
+
   &:disabled {
     color: var(--ams-tabs-button-disabled-color);
     cursor: var(--ams-tab-button-disabled-cursor);

package/src/components/text-area/text-area.scss

@@ -3,28 +3,34 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-text-area {
-  border: none;
+  background-color: var(--ams-text-area-background-color);
   box-shadow: var(--ams-text-area-box-shadow);
   color: var(--ams-text-area-color);
   font-family: var(--ams-text-area-font-family);
   font-size: var(--ams-text-area-font-size);
   font-weight: var(--ams-text-area-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-text-area-line-height);
-  max-width: 100%;
-  min-height: var(--ams-text-area-min-height);
+  max-inline-size: 100%; // This prevents overflow when using the `cols` prop
+  min-block-size: var(--ams-text-area-min-block-size);
   outline-offset: var(--ams-text-area-outline-offset);
   padding-block: var(--ams-text-area-padding-block);
   padding-inline: var(--ams-text-area-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
+  @include text-rendering;
   @include reset;
 
   &:hover {
@@ -34,6 +40,7 @@
 
 .ams-text-area::placeholder {
   color: var(--ams-text-area-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-text-area:disabled {
@@ -66,5 +73,5 @@
 }
 
 .ams-text-area--cols {
-  width: auto;
+  inline-size: auto;
 }

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

@@ -3,26 +3,32 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
+  -webkit-appearance: none; // Reset appearance for Safari < 15.4
+  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
   box-sizing: border-box;
   margin-block: 0;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-text-input {
-  border: none;
+  background-color: var(--ams-text-input-background-color);
   box-shadow: var(--ams-text-input-box-shadow);
   color: var(--ams-text-input-color);
   font-family: var(--ams-text-input-font-family);
   font-size: var(--ams-text-input-font-size);
   font-weight: var(--ams-text-input-font-weight);
+  inline-size: 100%;
   line-height: var(--ams-text-input-line-height);
   outline-offset: var(--ams-text-input-outline-offset);
   padding-block: var(--ams-text-input-padding-block);
   padding-inline: var(--ams-text-input-padding-inline);
   touch-action: manipulation;
-  width: 100%;
 
+  @include text-rendering;
   @include reset;
 
   &:hover {
@@ -32,6 +38,7 @@
 
 .ams-text-input::placeholder {
   color: var(--ams-text-input-placeholder-color);
+  opacity: 100%; // This resets the lower opacity set by Firefox
 }
 
 .ams-text-input:disabled {

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

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Time Input
+
+Helps users enter time.
+
+## Visual considerations
+
+This component uses a native time 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.