@amsterdam/design-system-css 0.7.0 → 0.8.0

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)

package/src/components/select/select.scss

@@ -0,0 +1,60 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin reset {
+  appearance: none;
+  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);
+  line-height: var(--ams-select-line-height);
+  max-inline-size: 100%;
+  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[aria-invalid="true"] {
+  box-shadow: var(--ams-select-invalid-box-shadow);
+
+  &:hover {
+    box-shadow: var(--ams-select-invalid-hover-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__option:disabled {
+  color: var(--ams-select-option-disabled-color);
+}

package/src/components/tabs/tabs.scss

@@ -5,15 +5,19 @@
 
 @import "../../common/breakpoint";
 
+@mixin reset-button {
+  background-color: transparent;
+  border: 0;
+}
+
 .ams-tabs__list {
+  background-color: var(--ams-tabs-list-background-color);
   border-bottom: var(--ams-tabs-list-border-bottom);
   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,14 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
   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);
+  border: 0;
   box-shadow: var(--ams-text-area-box-shadow);
   color: var(--ams-text-area-color);
   font-family: var(--ams-text-area-font-family);
@@ -25,6 +27,7 @@
   touch-action: manipulation;
   width: 100%;
 
+  @include text-rendering;
   @include reset;
 
   &:hover {

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

@@ -3,14 +3,16 @@
  * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/text-rendering";
+
 @mixin reset {
   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);
+  border: 0;
   box-shadow: var(--ams-text-input-box-shadow);
   color: var(--ams-text-input-color);
   font-family: var(--ams-text-input-font-family);
@@ -23,6 +25,7 @@
   touch-action: manipulation;
   width: 100%;
 
+  @include text-rendering;
   @include reset;
 
   &:hover {

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.

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

@@ -0,0 +1,79 @@
+/**
+ * @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;
+  width: auto; // Reset width of 10em set by Android devices
+}
+
+.ams-time-input {
+  background-color: var(--ams-time-input-background-color);
+  box-shadow: var(--ams-time-input-box-shadow);
+  color: var(--ams-time-input-color);
+  font-family: var(--ams-time-input-font-family);
+  font-size: var(--ams-time-input-font-size);
+  font-weight: var(--ams-time-input-font-weight);
+  line-height: var(--ams-time-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-time-input-font-size) * var(--ams-time-input-line-height)) + 2 * var(--ams-time-input-padding-block)
+  );
+
+  // Set min width for iOS, so the width is closer to the filled in width.
+  min-width: calc(4ch + (2 * var(--ams-time-input-padding-inline)));
+  outline-offset: var(--ams-time-input-outline-offset);
+  padding-block: var(--ams-time-input-padding-block);
+  padding-inline: var(--ams-time-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+  @include reset;
+
+  &:hover {
+    box-shadow: var(--ams-time-input-hover-box-shadow);
+  }
+}
+
+// This changes the default calendar icon on Chromium browsers only
+.ams-time-input::-webkit-calendar-picker-indicator {
+  appearance: none;
+  background-image: var(--ams-time-input-calender-picker-indicator-background-image);
+  cursor: pointer;
+}
+
+.ams-time-input:hover::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-time-input-hover-calender-picker-indicator-background-image);
+}
+
+.ams-time-input:disabled {
+  background-color: var(--ams-time-input-disabled-background-color);
+  box-shadow: var(--ams-time-input-disabled-box-shadow);
+  color: var(--ams-time-input-disabled-color);
+  cursor: not-allowed;
+}
+
+.ams-time-input:disabled::-webkit-calendar-picker-indicator {
+  background-image: var(--ams-time-input-disabled-calender-picker-indicator-background-image);
+  visibility: visible;
+}
+
+.ams-time-input:invalid,
+.ams-time-input[aria-invalid="true"] {
+  box-shadow: var(--ams-time-input-invalid-box-shadow);
+
+  &:hover {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    box-shadow: var(--ams-time-input-invalid-hover-box-shadow);
+  }
+}

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

@@ -4,6 +4,7 @@
  */
 
 @import "../../common/hyphenation";
+@import "../../common/text-rendering";
 
 .ams-top-task-link {
   break-inside: avoid;
@@ -16,7 +17,6 @@
 
 @mixin reset {
   box-sizing: border-box;
-  -webkit-text-size-adjust: 100%;
 }
 
 .ams-top-task-link__label {
@@ -30,6 +30,7 @@
   text-underline-offset: var(--ams-top-task-link-label-text-underline-offset);
 
   @include hyphenation;
+  @include text-rendering;
   @include reset;
 }
 

package/src/components/unordered-list/unordered-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: 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-unordered-list {
-  @include reset;
-
   display: grid;
   gap: var(--ams-unordered-list-gap);
+
+  @include text-rendering;
+  @include reset;
 }
 
 /** A list with markers sets typography for its text content. */

package/dist/form-label/form-label.css

@@ -1 +0,0 @@
-.ams-form-label{color:var(--ams-form-label-color);font-family:var(--ams-form-label-font-family);font-size:var(--ams-form-label-font-size);font-weight:var(--ams-form-label-font-weight);line-height:var(--ams-form-label-line-height);hyphenate-limit-chars:var(--ams-hyphenation-hyphenate-limit-chars);hyphens:var(--ams-hyphenation-hyphens);overflow-wrap:var(--ams-hyphenation-overflow-wrap);-webkit-text-size-adjust:100%}/*# sourceMappingURL=form-label.css.map */

package/dist/form-label/form-label.css.map

@@ -1 +0,0 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/form-label/form-label.scss","../../src/common/hyphenation.scss"],"names":[],"mappings":"AAWA,gBACE,kCACA,8CACA,0CACA,8CACA,8CCVA,mEACA,uCACA","file":"form-label.css"}

package/src/components/form-label/form-label.scss

@@ -1,21 +0,0 @@
-/**
- * @license EUPL-1.2+
- * Copyright Gemeente Amsterdam
- */
-
-@import "../../common/hyphenation";
-
-@mixin reset {
-  -webkit-text-size-adjust: 100%;
-}
-
-.ams-form-label {
-  color: var(--ams-form-label-color);
-  font-family: var(--ams-form-label-font-family);
-  font-size: var(--ams-form-label-font-size);
-  font-weight: var(--ams-form-label-font-weight);
-  line-height: var(--ams-form-label-line-height);
-
-  @include hyphenation;
-  @include reset;
-}