@amsterdam/design-system-css 0.11.0 → 0.12.0

package/src/components/radio/radio.scss

@@ -12,28 +12,7 @@
   @include input-label-focus;
 }
 
-.ams-radio__circle {
-  align-items: center;
-  block-size: calc(var(--ams-radio-font-size) * var(--ams-radio-line-height));
-  display: flex;
-  flex-shrink: 0;
-  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: var(--ams-radio-circle-border-width);
-    box-sizing: border-box;
-    content: "";
-    inline-size: 100%;
-  }
-}
-
+// Default
 .ams-radio__label {
   color: var(--ams-radio-color);
   cursor: pointer;
@@ -44,111 +23,165 @@
   gap: var(--ams-radio-gap);
   line-height: var(--ams-radio-line-height);
   outline-offset: var(--ams-radio-outline-offset);
+  text-decoration-thickness: var(--ams-radio-text-decoration-thickness);
+  text-underline-offset: var(--ams-radio-text-underline-offset);
 
-  &:hover {
-    color: var(--ams-radio-hover-color);
-    text-decoration-line: underline;
-    text-decoration-thickness: var(--ams-radio-hover-text-decoration-thickness);
-    text-underline-offset: 0.375rem;
+  @include text-rendering;
+}
 
-    .ams-radio__circle::after {
-      border-color: var(--ams-radio-circle-hover-border-color);
-    }
+.ams-radio__icon-container {
+  block-size: var(--ams-radio-icon-container-block-size);
+  display: flex;
+  flex: none;
+  inline-size: var(--ams-radio-icon-container-inline-size);
+}
+
+.ams-radio__circle {
+  fill: none;
+  stroke: var(--ams-radio-circle-stroke);
+  stroke-width: 0.125rem;
+}
+
+.ams-radio__checked-indicator {
+  display: none;
+  fill: var(--ams-radio-checked-indicator-fill);
+}
+
+// Default hover
+.ams-radio__label:hover {
+  color: var(--ams-radio-hover-color);
+  text-decoration-line: var(--ams-radio-hover-text-decoration-line);
+
+  .ams-radio__circle {
+    stroke: var(--ams-radio-circle-hover-stroke);
   }
 
-  @include text-rendering;
+  .ams-radio__checked-indicator {
+    fill: var(--ams-radio-checked-indicator-hover-fill);
+  }
 }
 
-// Default checked
-.ams-radio__input:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-checked-background-image);
+// Invalid
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label {
+  .ams-radio__circle {
+    stroke: var(--ams-radio-circle-invalid-stroke);
+  }
+
+  .ams-radio__checked-indicator {
+    fill: var(--ams-radio-checked-indicator-invalid-fill);
   }
 }
 
-// Invalid unchecked
-.ams-radio__input[aria-invalid="true"] {
-  + .ams-radio__label .ams-radio__circle::after {
-    border-color: var(--ams-radio-circle-invalid-border-color);
+// Checked
+.ams-radio__input:checked + .ams-radio__label {
+  .ams-radio__checked-indicator {
+    display: block;
   }
 }
 
-// Disabled unchecked
-.ams-radio__input:disabled {
-  + .ams-radio__label {
-    color: var(--ams-radio-disabled-color);
-    cursor: not-allowed;
+// Disabled
+.ams-radio__input:disabled + .ams-radio__label {
+  color: var(--ams-radio-disabled-color);
+  cursor: not-allowed;
 
-    .ams-radio__circle::after {
-      border-color: var(--ams-radio-circle-disabled-border-color);
-      border-width: var(--ams-radio-circle-disabled-border-width);
-    }
+  .ams-radio__circle {
+    stroke: var(--ams-radio-circle-disabled-stroke);
+  }
+
+  .ams-radio__checked-indicator {
+    fill: var(--ams-radio-checked-indicator-disabled-fill);
   }
 }
 
-// Invalid checked
-.ams-radio__input[aria-invalid="true"]:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-invalid-checked-background-image);
+// Disabled invalid
+.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label {
+  .ams-radio__circle {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    stroke: var(--ams-radio-circle-disabled-invalid-stroke);
+  }
+
+  .ams-radio__checked-indicator {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    fill: var(--ams-radio-checked-indicator-disabled-invalid-fill);
   }
 }
 
-// Disabled label
+// HOVER
+
+// Disabled label hover
 .ams-radio__input:disabled + .ams-radio__label:hover {
   text-decoration: none;
 }
 
-// Disabled checked
-.ams-radio__input:disabled:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    background-image: var(--ams-radio-circle-disabled-checked-background-image);
+// Invalid hover
+.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
+  .ams-radio__circle {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    stroke: var(--ams-radio-circle-invalid-hover-stroke);
   }
-}
 
-// Disabled invalid unchecked
-.ams-radio__input[aria-invalid="true"]:disabled {
-  + .ams-radio__label .ams-radio__circle::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    border-color: var(--ams-radio-circle-disabled-border-color);
+  .ams-radio__checked-indicator {
+    // TODO: this should be the (currently non-existent) dark red hover color
+    fill: var(--ams-radio-checked-indicator-invalid-hover-fill);
   }
 }
 
-// HOVER STATES
+// Disabled invalid hover
+.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover {
+  .ams-radio__circle {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    stroke: var(--ams-radio-circle-disabled-invalid-hover-stroke);
+  }
 
-// Invalid unchecked hover
-.ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover .ams-radio__circle::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
-  border-color: var(--ams-radio-circle-invalid-hover-border-color);
+  .ams-radio__checked-indicator {
+    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
+    fill: var(--ams-radio-checked-indicator-disabled-invalid-hover-fill);
+  }
 }
 
-// Default checked hover
-.ams-radio__input:checked + .ams-radio__label:hover .ams-radio__circle::after {
-  background-image: var(--ams-radio-circle-checked-hover-background-image);
-}
+// FORCED COLORS
 
-// Invalid checked hover
-.ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover .ams-radio__circle::after {
-  // TODO: this should be the (currently non-existent) dark red hover color
-  background-image: var(--ams-radio-circle-invalid-checked-hover-background-image);
-}
+// Default
+@media (forced-colors: active) {
+  .ams-radio__label,
+  .ams-radio__label:hover,
+  .ams-radio__input[aria-invalid="true"] + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
+    .ams-radio__circle {
+      stroke: FieldText;
+    }
 
-// Disabled checked hover
-.ams-radio__input:disabled:checked + .ams-radio__label:hover .ams-radio__circle::after {
-  background-image: var(--ams-radio-circle-disabled-checked-hover-background-image);
+    .ams-radio__checked-indicator {
+      fill: FieldText;
+    }
+  }
 }
 
-// Disabled invalid unchecked hover
-.ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover .ams-radio__circle::after {
-  // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-  border-color: var(--ams-radio-circle-disabled-border-color);
+// Checked
+@media (forced-colors: active) {
+  .ams-radio__input:checked + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"]:checked + .ams-radio__label:hover {
+    .ams-radio__circle {
+      stroke: ActiveText;
+    }
+
+    .ams-radio__checked-indicator {
+      fill: ActiveText;
+    }
+  }
 }
 
-// DISABLED INVALID STATES
+// Disabled
+@media (forced-colors: active) {
+  .ams-radio__input:disabled + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label,
+  .ams-radio__input[aria-invalid="true"]:disabled + .ams-radio__label:hover {
+    .ams-radio__circle {
+      stroke: GrayText;
+    }
 
-// Disabled invalid checked
-.ams-radio__input[aria-invalid="true"]:disabled:checked {
-  + .ams-radio__label .ams-radio__circle::after {
-    // TODO: currently disabled invalid gets the same styling as disabled. This should get its own styling.
-    background-image: var(--ams-radio-circle-disabled-checked-background-image);
+    .ams-radio__checked-indicator {
+      fill: GrayText;
+    }
   }
 }

package/src/components/screen/README.md

@@ -4,15 +4,16 @@
 
 Manages the maximum width and alignment of the entire website or application.
 
-## Usage
+## Guidelines
 
-This should be the outermost component of your website or application.
-Within it, combine components such as
-[Grid](/docs/components-layout-grid--docs),
-[Header](/docs/components-containers-header--docs),
-[Footer](/docs/components-containers-footer--docs),
-[Spotlight](/docs/components-containers-spotlight--docs),
-and Figure.
+- This should be the outermost component of your website or application.
+- Within it, combine components such as
+  [Grid](/docs/components-layout-grid--docs),
+  [Header](/docs/components-containers-header--docs),
+  [Footer](/docs/components-containers-footer--docs),
+  [Spotlight](/docs/components-containers-spotlight--docs),
+  [Image Slider](/docs/components-media-image-slider--docs),
+  and Figure.
 
 ## Design
 

package/src/components/screen/screen.scss

@@ -10,6 +10,7 @@
 .ams-screen {
   background-color: var(--ams-screen-background-color);
   margin-inline: auto;
+  position: relative;
 
   @include reset;
 }

package/src/components/search-field/README.md

@@ -32,4 +32,4 @@ These features can be disruptive for a user searching for part of a word, and `a
 - [WCAG 1.3.5](https://www.w3.org/TR/WCAG22/#identify-input-purpose): It is clear both to the user and programmatically what the purpose of a form field is.
 - [WCAG 2.4.6](https://www.w3.org/TR/WCAG22/#headings-and-labels): There is a label describing the purpose of the input.
 
-Search Field is an interactive element; therefore, [the general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.
+Search Field is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.

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

@@ -71,10 +71,10 @@
 
 @mixin reset-button {
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
 
-  // Reset margins added by Safari on iOS
-  margin-block: 0;
-  margin-inline: 0;
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-search-field__button {

package/src/components/select/select.scss

@@ -23,6 +23,8 @@
   padding-inline: var(--ams-select-padding-inline);
   touch-action: manipulation;
 
+  @include reset;
+
   &:not([multiple]) {
     background-image: var(--ams-select-background-image);
     background-position: var(--ams-select-background-position);
@@ -33,8 +35,6 @@
   &:hover {
     box-shadow: var(--ams-select-hover-box-shadow);
   }
-
-  @include reset;
 }
 
 .ams-select:invalid,

package/src/components/skip-link/README.md

@@ -11,8 +11,6 @@ When the link is shown, it pushes the entire page down.
 
 ## Guidelines
 
-### How to Use
-
 - Place the Skip Link as the first element in `<body>` unless you have a cookie banner.
   In that case, place the Skip Link immediately after the cookie banner.
 - Use the Skip Link to navigate to the main content.
@@ -20,9 +18,6 @@ When the link is shown, it pushes the entire page down.
 - Set `id="example-id"` on the container of that element and then use `href="#example-id"` on the Skip Link.
 - You can use more than one Skip Link for complex pages with multiple sections.
   In most cases, this is not necessary.
-
-### Avoid
-
 - Skip Links are unnecessary on a simple page with only text and minimal navigation.
   The purpose of a Skip Link is to bypass recurring navigation blocks.
   If those blocks are not present, a Skip Link is not needed.

package/src/components/spotlight/README.md

@@ -6,7 +6,8 @@ Emphasizes a section on a page through a distinctive background colour.
 
 ## Guidelines
 
-Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
+- Display the Spotlight at the entire width of the [Screen](/docs/components-layout-screen--docs); do not position it on the [Grid](/docs/components-layout-grid--docs).
+- Refer to [this overview on Stijlweb](https://amsterdam.nl/stijlweb/basiselementen/kleuren/#PagCls_15671872) to determine whether you can use black or white text on the background colour of your choice.
 
 ## Relevant WCAG requirements
 

package/src/components/switch/README.md

@@ -7,16 +7,16 @@ A switch applies to a page or the entire system, such as an on/off switch.
 
 ## Guidelines
 
+- A Switch must have a label, and in most cases, this label should be visible.
 - Switch only between two different states.
   It is a binary action.
-- Use labels with a switch to make the action clear.
 - The action takes place immediately when the user operates the switch.
 
 ## Relevant WCAG requirements
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): it is both clear for a user and programmatically what the purpose of a form field is.
 
-Switch is an interactive element; general requirements and guidelines for interactivity apply [here](/docs/docs-developer-guide-interactivity--docs).
+Switch is an interactive element, and the [general requirements and guidelines for interactivity](/docs/docs-developer-guide-interactivity--docs) apply.
 
 ## References
 

package/src/components/switch/switch.scss

@@ -16,16 +16,17 @@
 }
 
 .ams-switch__label {
-  --ams-switch-track-padding: 0.0625rem;
+  --ams-switch-track-border-width: 0.0625rem;
 
   background-color: var(--ams-switch-background-color);
+
+  // Using a transparent border to make sure the component is visible in forced colors mode.
+  border: var(--ams-switch-track-border-width) solid transparent;
   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: var(--ams-switch-track-padding);
-  padding-inline: var(--ams-switch-track-padding);
   transition: background-color 0.2s ease-in-out;
 
   @include reset;
@@ -41,6 +42,10 @@
   transition-duration: 0.1s;
   transition-property: box-shadow, transform;
   transition-timing-function: ease-in-out;
+
+  @media (forced-colors: active) {
+    background-color: FieldText;
+  }
 }
 
 .ams-switch__input:checked + .ams-switch__label {
@@ -53,9 +58,7 @@
 }
 
 .ams-switch__input:checked + .ams-switch__label::before {
-  transform: translate(
-    calc(var(--ams-switch-inline-size) - var(--ams-switch-thumb-inline-size) - 2 * var(--ams-switch-track-padding))
-  );
+  transform: translate(calc(100% - 2 * var(--ams-switch-track-border-width)));
 }
 
 .ams-switch:hover .ams-switch__input:enabled + .ams-switch__label::before {

package/src/components/tabs/README.md

@@ -4,11 +4,13 @@
 
 Tabs are used to bundle related content in a compact overview within a page. Each tab has a short name, and these names indicate the relationship between the information displayed in each tab.
 
-## How to use
+## Guidelines
 
 - The content of each tab is viewable independently, not in the context of one another.
 - The content within each tab should have a similar structure.
 - Use when there is limited visual space and content needs to be divided into sections.
+- Each tab consists of a button and a panel.
+  A `tab` prop with a corresponding value connects them.
 
 You can navigate tabs with your keyboard:
 

package/src/components/tabs/tabs.scss

@@ -8,6 +8,10 @@
 @mixin reset-button {
   background-color: transparent;
   border: 0;
+  margin-block: 0; // [1]
+  margin-inline: 0; // [1]
+
+  // [1] Remove the margin in older Safari.
 }
 
 .ams-tabs {
@@ -38,6 +42,10 @@
   &:disabled {
     color: var(--ams-tabs-button-disabled-color);
     cursor: var(--ams-tab-button-disabled-cursor);
+
+    @media (forced-colors: active) {
+      color: GrayText;
+    }
   }
 
   &:hover:not([aria-selected="true"], [disabled]) {
@@ -48,5 +56,9 @@
   &[aria-selected="true"] {
     background-color: var(--ams-tabs-button-selected-background-color);
     color: var(--ams-tabs-button-selected-color);
+
+    @media (forced-colors: active) {
+      background-color: SelectedItem;
+    }
   }
 }

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

@@ -10,7 +10,7 @@ A form field in which a user can enter text.
 - Do not use a Text Input when users could provide more than 1 sentence of text.
 - The width of the Text Input should be appropriate for the information to be entered.
 - A Text Input must have a Label, and in most cases, this label should be visible.
-- Use `spellcheck="false"` for fields that may contain sensitive information, such as passwords and personal data.
+- Use `spellcheck="false"` for fields that may contain sensitive information, such as personal data.
   Some browser extensions for spell-checking send this information to external servers.
 - Apply automatic assistance where possible.
   For example, in logged-in systems, pre-filling known values can prevent errors and save time.

package/src/components/top-task-link/README.md

@@ -18,6 +18,10 @@ A prominent navigation element to quickly start a task.
   If this is not possible, leave the last cells of the grid empty.
 - If you have a group of links for which a description is unnecessary or illogical, use a [Link List](/docs/components-navigation-link--docs).
 
+### Using links with routing libraries
+
+Check out the [developer guide](/docs/docs-developer-guide-routing-libraries--docs) on how to integrate links with external routing libraries.
+
 ## Relevant WCAG requirements
 
 The Top Task Link is subject to the same requirements as [regular links](/docs/components-navigation-link--docs).

package/src/components/unordered-list/README.md

@@ -7,3 +7,9 @@ This list can have 2 levels.
 The first level consists of squares.
 The second level consists of en dashes (–).
 Text in the list items is indented by a fixed distance.
+
+## Design
+
+Items of an unordered list have square markers.
+There is extra white space between the items.
+This provides better distinction between the items, especially when they consist of multiple lines of text.

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

@@ -5,7 +5,6 @@
 
 @import "../../common/text-rendering";
 
-/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style: none;
@@ -13,7 +12,6 @@
   padding-inline-start: 0;
 }
 
-/** A list is a grid column with a gap between items. */
 .ams-unordered-list {
   display: grid;
   gap: var(--ams-unordered-list-gap);
@@ -22,7 +20,6 @@
   @include reset;
 }
 
-/** A list with markers sets typography for its text content. */
 .ams-unordered-list:not(.ams-unordered-list--no-markers) {
   color: var(--ams-unordered-list-color);
   font-family: var(--ams-unordered-list-font-family);
@@ -31,7 +28,6 @@
   line-height: var(--ams-unordered-list-line-height);
   list-style-type: var(--ams-unordered-list-list-style-type);
 
-  /** List items are responsible for indentation and marker positioning. */
   .ams-unordered-list__item {
     margin-inline-start: var(--ams-unordered-list-item-margin-inline-start);
     padding-inline-start: var(--ams-unordered-list-item-padding-inline-start);
@@ -47,9 +43,11 @@
   line-height: var(--ams-unordered-list-small-line-height);
 }
 
-/** A nested list has a different marker and less indentation for correct alignment. */
 :is(.ams-ordered-list, .ams-unordered-list) .ams-unordered-list {
+  gap: var(--ams-unordered-list-unordered-list-gap);
   list-style-type: var(--ams-unordered-list-unordered-list-list-style-type);
+  padding-block-end: var(--ams-unordered-list-unordered-list-padding-block-end);
+  padding-block-start: var(--ams-unordered-list-unordered-list-padding-block-start);
 
   .ams-unordered-list__item {
     margin-inline-start: var(--ams-unordered-list-unordered-list-item-margin-inline-start);