@amsterdam/design-system-css 3.1.0 → 3.2.1

package/src/components/table-of-contents/table-of-contents.scss

@@ -4,13 +4,9 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  margin-block: 0;
-  padding-inline: 0;
-}
-
 .ams-table-of-contents {
   display: flex;
   flex-direction: column;
@@ -22,15 +18,15 @@
 }
 
 .ams-table-of-contents__list {
+  @include reset-ul;
+
   box-sizing: border-box;
   display: flex;
   flex-direction: column;
   gap: var(--ams-table-of-contents-list-gap);
-  list-style: none;
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 
   .ams-table-of-contents__list {
     padding-block-start: var(--ams-table-of-contents-list-list-padding-block-start);

package/src/components/tabs/tabs.scss

@@ -4,15 +4,7 @@
  */
 
 @use "../../common/breakpoint" as *;
-
-@mixin reset-button {
-  background-color: transparent;
-  border: none;
-  margin-block: 0; // [1]
-  margin-inline: 0; // [1]
-
-  // [1] Remove the margin in older Safari.
-}
+@use "../../common/resets" as *;
 
 .ams-tabs {
   display: grid;
@@ -26,6 +18,9 @@
 }
 
 .ams-tabs__button {
+  @include reset-button;
+
+  background-color: transparent;
   color: var(--ams-tabs-button-color);
   cursor: var(--ams-tabs-button-cursor);
   display: grid;
@@ -38,8 +33,6 @@
   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-tabs-button-disabled-cursor);

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

@@ -3,16 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-textarea {
-  -webkit-appearance: none; // Reset appearance for Safari < 15.4
-  appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
-  border-radius: 0; // Reset rounded borders on iOS devices
-  margin-block: 0;
-}
-
 .ams-text-area {
+  @include reset-textarea;
+
   background-color: var(--ams-text-area-background-color);
   border-color: var(--ams-text-area-border-color);
   border-style: var(--ams-text-area-border-style);
@@ -32,17 +28,12 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-textarea;
-}
-
-@mixin reset-placeholder {
-  opacity: 100%; // Reset lower opacity set by Firefox
 }
 
 .ams-text-area::placeholder {
-  color: var(--ams-text-area-placeholder-color);
-
   @include reset-placeholder;
+
+  color: var(--ams-text-area-placeholder-color);
 }
 
 .ams-text-area:disabled {

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

@@ -3,16 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@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-radius: 0; // Reset rounded borders on iOS devices
-  margin-block: 0;
-}
-
 .ams-text-input {
+  @include reset-input;
+
   background-color: var(--ams-text-input-background-color);
   border-color: var(--ams-text-input-border-color);
   border-style: var(--ams-text-input-border-style);
@@ -30,21 +26,16 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
 }
 
 .ams-text-input:not([size]) {
   inline-size: 100%;
 }
 
-@mixin reset-placeholder {
-  opacity: 100%; // Reset lower opacity set by Firefox
-}
-
 .ams-text-input::placeholder {
-  color: var(--ams-text-input-placeholder-color);
-
   @include reset-placeholder;
+
+  color: var(--ams-text-input-placeholder-color);
 }
 
 .ams-text-input:disabled {

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

@@ -3,27 +3,12 @@
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@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-radius: 0; // Reset rounded borders on iOS devices
-  inline-size: auto; // Reset inline size of 10em set by Android devices
-  margin-block: 0;
-
-  &::-webkit-datetime-edit,
-  &::-webkit-datetime-edit-ampm-field,
-  &::-webkit-datetime-edit-fields-wrapper,
-  &::-webkit-datetime-edit-hour-field,
-  &::-webkit-datetime-edit-millisecond-field,
-  &::-webkit-datetime-edit-minute-field,
-  &::-webkit-datetime-edit-second-field {
-    padding-block: 0; // Override value of 1px in UA stylesheet
-  }
-}
-
 .ams-time-input {
+  @include reset-input;
+
   background-color: var(--ams-time-input-background-color);
   border-color: var(--ams-time-input-border-color);
   border-style: var(--ams-time-input-border-style);
@@ -33,6 +18,9 @@
   font-family: var(--ams-time-input-font-family);
   font-size: var(--ams-time-input-font-size);
   font-weight: var(--ams-time-input-font-weight);
+
+  // Reset inline size of 10em set by Android devices.
+  inline-size: auto;
   line-height: var(--ams-time-input-line-height);
 
   // Set min block size for iOS, otherwise an empty box is a lot smaller than a filled one.
@@ -48,7 +36,17 @@
   touch-action: manipulation;
 
   @include text-rendering;
-  @include reset-input;
+
+  // Reset padding on webkit time edit fields to override the value of 1px in the UA stylesheet.
+  &::-webkit-datetime-edit,
+  &::-webkit-datetime-edit-ampm-field,
+  &::-webkit-datetime-edit-fields-wrapper,
+  &::-webkit-datetime-edit-hour-field,
+  &::-webkit-datetime-edit-millisecond-field,
+  &::-webkit-datetime-edit-minute-field,
+  &::-webkit-datetime-edit-second-field {
+    padding-block: 0;
+  }
 }
 
 // This changes the default calendar icon on Chromium browsers only

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

@@ -4,22 +4,18 @@
  */
 
 @use "../../common/hyphenation" as *;
+@use "../../common/resets" as *;
 @use "../../common/text-rendering" as *;
 
-@mixin reset-ul {
-  list-style: none;
-  margin-block: 0;
-  padding-inline-start: 0;
-}
-
 .ams-unordered-list {
+  @include reset-ul;
+
   box-sizing: border-box;
   display: grid;
   gap: var(--ams-unordered-list-gap);
 
   @include hyphenation;
   @include text-rendering;
-  @include reset-ul;
 }
 
 .ams-unordered-list:not(.ams-unordered-list--no-markers) {