Merge branch 'develop' of https://github.com/Amsterdam/design-system …

…into feature/DES-654-table-of-content

packages/css/documentation/coding-conventions.md

@@ -13,8 +13,8 @@ Still, we define its thickness and offset for the initial state.
 ```css
 .ams-link {
   text-decoration: none;
-  text-decoration-thickness: 2px;
-  text-underline-offset: 3px;
+  text-decoration-thickness: 0.125rem;
+  text-underline-offset: 0.1667em;
 
   &:hover {
     text-decoration: underline;
@@ -30,8 +30,8 @@ Still, we define its thickness and offset for the initial state.
 
   &:hover {
     text-decoration: underline;
-    text-decoration-thickness: 2px;
-    text-underline-offset: 3px;
+    text-decoration-thickness: 0.125rem;
+    text-underline-offset: 0.1667em;
   }
 }
 ```

packages/css/src/components/badge/badge.scss

@@ -12,16 +12,16 @@
   padding-inline: var(--ams-badge-padding-inline);
 }
 
+.ams-badge--black {
+  background-color: var(--ams-badge-black-background-color);
+  color: var(--ams-badge-black-color);
+}
+
 .ams-badge--blue {
   background-color: var(--ams-badge-blue-background-color);
   color: var(--ams-badge-blue-color);
 }
 
-.ams-badge--dark-blue {
-  background-color: var(--ams-badge-dark-blue-background-color);
-  color: var(--ams-badge-dark-blue-color);
-}
-
 .ams-badge--dark-green {
   background-color: var(--ams-badge-dark-green-background-color);
   color: var(--ams-badge-dark-green-color);
@@ -32,6 +32,26 @@
   color: var(--ams-badge-green-color);
 }
 
+.ams-badge--grey-1 {
+  background-color: var(--ams-badge-grey-1-background-color);
+  color: var(--ams-badge-grey-1-color);
+}
+
+.ams-badge--grey-2 {
+  background-color: var(--ams-badge-grey-2-background-color);
+  color: var(--ams-badge-grey-2-color);
+}
+
+.ams-badge--grey-3 {
+  background-color: var(--ams-badge-grey-3-background-color);
+  color: var(--ams-badge-grey-3-color);
+}
+
+.ams-badge--light-blue {
+  background-color: var(--ams-badge-light-blue-background-color);
+  color: var(--ams-badge-light-blue-color);
+}
+
 .ams-badge--magenta {
   background-color: var(--ams-badge-magenta-background-color);
   color: var(--ams-badge-magenta-color);
@@ -47,6 +67,16 @@
   color: var(--ams-badge-purple-color);
 }
 
+.ams-badge--red {
+  background-color: var(--ams-badge-red-background-color);
+  color: var(--ams-badge-red-color);
+}
+
+.ams-badge--white {
+  background-color: var(--ams-badge-white-background-color);
+  color: var(--ams-badge-white-color);
+}
+
 .ams-badge--yellow {
   background-color: var(--ams-badge-yellow-background-color);
   color: var(--ams-badge-yellow-color);

packages/css/src/components/card/card.scss

@@ -14,7 +14,7 @@
   &:has(:focus-visible) {
     outline-color: -webkit-focus-ring-color;
     outline-style: auto;
-    outline-width: 1px;
+    outline-width: 0.0625rem;
   }
 
   /*

packages/css/src/components/field-set/README.md

@@ -0,0 +1,17 @@
+<!-- @license CC0-1.0 -->
+
+# Field Set
+
+A component to group related form inputs.
+
+## Guidelines
+
+- Use Field Set when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single Field Set when asking for an address.
+
+## Relevant WCAG Requirements
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Field Set labels the purpose of a group of inputs.
+
+## References
+
+- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71)

packages/css/src/components/field-set/field-set.scss

@@ -0,0 +1,48 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+@import "../../common/text-rendering";
+
+@mixin reset {
+  border: 0;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.ams-field-set {
+  break-inside: avoid;
+
+  @include reset;
+}
+
+.ams-field-set--invalid {
+  border-inline-start: var(--ams-field-set-invalid-border-inline-start);
+  padding-inline-start: var(--ams-field-set-invalid-padding-inline-start);
+}
+
+@mixin reset-legend {
+  float: left; // [1]
+  padding-inline: 0;
+  width: 100%; // [1]
+}
+
+// [1] This combination allows the fieldset border to go around the legend, instead of through it.
+
+.ams-field-set__legend {
+  color: var(--ams-field-set-legend-color);
+  font-family: var(--ams-field-set-legend-font-family);
+  font-size: var(--ams-field-set-legend-font-size);
+  font-weight: var(--ams-field-set-legend-font-weight);
+  line-height: var(--ams-field-set-legend-line-height);
+  margin-block-end: var(
+    --ams-field-set-legend-margin-block-end
+  ); /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
+
+  @include hyphenation;
+  @include text-rendering;
+  @include reset-legend;
+}

packages/css/src/components/field/README.md

@@ -6,4 +6,4 @@ Wraps a single input and its related elements. May indicate that the input has a
 
 ## Guidelines
 
-Only use Field to wrap a single input. Use [Fieldset](/docs/components-forms-fieldset--docs) to wrap multiple inputs.
+Only use Field to wrap a single input. Use [Field Set](/docs/components-forms-field-set--docs) to wrap multiple inputs.

packages/css/src/components/file-input/README.md

@@ -0,0 +1,9 @@
+<!-- @license CC0-1.0 -->
+
+# File Input
+
+Allows the user to upload one or more files from their device.
+
+## Visual considerations
+
+The filename label and button are displayed in the language of the browser and can vary between browsers and operating systems.

packages/css/src/components/file-input/file-input.scss

@@ -0,0 +1,68 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/text-rendering";
+
+@mixin reset-button {
+  border: 0;
+  border-radius: 0; // Reset rounded borders on iOS devices
+  box-sizing: border-box;
+}
+
+.ams-file-input {
+  background-color: var(--ams-file-input-background-color);
+  border: var(--ams-file-input-border);
+  color: var(--ams-file-input-color);
+  cursor: var(--ams-file-input-cursor);
+  font-family: var(--ams-file-input-font-family);
+  font-size: var(--ams-file-input-font-size);
+  font-weight: var(--ams-file-input-font-weight);
+  line-height: var(--ams-file-input-line-height);
+  max-inline-size: calc(100% - var(--ams-file-input-padding-inline) * 2);
+  outline-offset: 0.25rem; // Double the default focus outline offset to compensate for the dashed border
+  padding-block: var(--ams-file-input-padding-block);
+  padding-inline: var(--ams-file-input-padding-inline);
+  touch-action: manipulation;
+
+  @include text-rendering;
+}
+
+.ams-file-input:disabled {
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-disabled-cursor);
+}
+
+.ams-file-input::file-selector-button {
+  appearance: none; // Reset default appearance on iOS devices
+  background-color: var(--ams-file-input-file-selector-button-background-color);
+  box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  color: var(--ams-file-input-file-selector-button-color);
+  cursor: var(--ams-file-input-file-selector-button-cursor);
+  font-family: inherit;
+  font-size: inherit; // iOS specific fix
+  font-weight: inherit;
+  margin-inline-end: var(--ams-file-input-file-selector-button-margin-inline-end);
+  padding-block: var(--ams-file-input-file-selector-button-padding-block);
+  padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
+
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: var(
+      --ams-file-input-file-selector-button-forced-color-mode-border
+    ); // add border because forced colors changes box-shadow to none
+  }
+
+  @include reset-button;
+}
+
+.ams-file-input:disabled::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-disabled-box-shadow);
+  color: var(--ams-file-input-disabled-color);
+  cursor: var(--ams-file-input-file-selector-button-disabled-cursor);
+}
+
+.ams-file-input:not(:disabled):hover::file-selector-button {
+  box-shadow: var(--ams-file-input-file-selector-button-hover-box-shadow);
+  color: var(--ams-file-input-file-selector-button-hover-color);
+}

packages/css/src/components/header/header.scss

@@ -65,21 +65,21 @@
   }
 }
 
-// Temporary, will move to megamenu (and/or iconButton)
+// Temporary – will move to Mega Menu and/or Icon Button
 .ams-header__menu-button {
   background-color: transparent;
   background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M0 3.238h32V7.81H0V3.238zm0 10.476h32v4.572H0v-4.572zM0 24.19h32v4.572H0V24.19z'/></svg>");
   background-position: center right;
   background-repeat: no-repeat;
-  background-size: 19px 19px;
+  background-size: 1.1875rem 1.1875rem;
   border: 0;
   color: var(--ams-page-menu-item-color);
   font-family: var(--ams-page-menu-item-font-family);
   font-size: var(--ams-page-menu-item-font-size);
   font-weight: var(--ams-page-menu-item-font-weight);
   line-height: var(--ams-page-menu-item-line-height);
   margin-block: 0;
-  padding-inline: 0 30px;
+  padding-inline: 0 1.875rem;
   text-align: center;
   touch-action: manipulation;
 }

packages/css/src/components/index.scss

@@ -5,6 +5,7 @@
 
 /* Append here */
 @import "./table-of-contents/table-of-contents";
+@import "./file-input/file-input";
 @import "./field/field";
 @import "./select/select";
 @import "./time-input/time-input";
@@ -20,7 +21,7 @@
 @import "./column/column";
 @import "./margin/margin";
 @import "./gap/gap";
-@import "./fieldset/fieldset";
+@import "./field-set/field-set";
 @import "./link-list/link-list";
 @import "./badge/badge";
 @import "./table/table";

packages/css/src/components/search-field/search-field.scss

@@ -48,6 +48,7 @@
 
 .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 {

packages/css/src/components/switch/switch.scss

@@ -16,13 +16,15 @@
 }
 
 .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);
   cursor: pointer;
   display: inline-block;
   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);
 
@@ -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-width) - var(--ams-switch-thumb-width) - 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);
 }

packages/css/src/components/text-area/text-area.scss

@@ -37,6 +37,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 {