@amsterdam/design-system-css 1.0.1 → 2.0.0

package/src/components/checkbox/checkbox.scss

@@ -8,11 +8,6 @@
 @use "../../common/hyphenation" as *;
 @use "../../common/text-rendering" as *;
 
-.ams-checkbox__input {
-  @include hide-input;
-  @include input-label-focus;
-}
-
 // Default
 .ams-checkbox__label {
   color: var(--ams-checkbox-color);
@@ -24,6 +19,8 @@
   gap: var(--ams-checkbox-gap);
   line-height: var(--ams-checkbox-line-height);
   outline-offset: var(--ams-checkbox-outline-offset);
+  text-decoration-thickness: var(--ams-checkbox-text-decoration-thickness);
+  text-underline-offset: var(--ams-checkbox-text-underline-offset);
 
   @include hyphenation;
   @include text-rendering;
@@ -39,6 +36,11 @@
 .ams-checkbox__rectangle {
   fill: var(--ams-checkbox-rectangle-fill);
   stroke: var(--ams-checkbox-rectangle-stroke);
+
+  @media (forced-colors: active) {
+    fill: Canvas;
+    stroke: FieldText;
+  }
 }
 
 .ams-checkbox__hover-indicator {
@@ -48,269 +50,172 @@
 .ams-checkbox__checked-indicator {
   display: none;
   stroke: var(--ams-checkbox-checked-indicator-stroke);
+
+  @media (forced-colors: active) {
+    stroke: Canvas;
+  }
 }
 
 .ams-checkbox__indeterminate-indicator {
   display: none;
   stroke: var(--ams-checkbox-indeterminate-indicator-stroke);
-}
-
-// Default hover
-.ams-checkbox__label:hover {
-  color: var(--ams-checkbox-hover-color);
-  text-decoration-line: underline;
-  text-decoration-thickness: var(--ams-checkbox-hover-text-decoration-thickness);
-  text-underline-offset: 0.375rem;
-
-  .ams-checkbox__rectangle {
-    stroke: var(--ams-checkbox-rectangle-hover-stroke);
-  }
 
-  .ams-checkbox__hover-indicator {
-    stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
+  @media (forced-colors: active) {
+    stroke: Canvas;
   }
 }
 
-// Invalid
-.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    stroke: var(--ams-checkbox-rectangle-invalid-stroke);
+@mixin forced-colors-selected {
+  @media (forced-colors: active) {
+    fill: ActiveText;
+    stroke: ActiveText;
   }
 }
 
-// Indeterminate
-.ams-checkbox__input:indeterminate + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-fill);
-  }
-
-  .ams-checkbox__indeterminate-indicator {
-    display: block;
+@mixin forced-colors-disabled {
+  @media (forced-colors: active) {
+    fill: GrayText;
+    stroke: GrayText;
   }
 }
 
-// Disabled
-.ams-checkbox__input:disabled + .ams-checkbox__label {
-  color: var(--ams-checkbox-disabled-color);
-  cursor: var(--ams-checkbox-disabled-cursor);
-
-  .ams-checkbox__rectangle {
-    stroke: var(--ams-checkbox-rectangle-disabled-stroke);
-  }
+.ams-checkbox__input {
+  @include hide-input;
+  @include input-label-focus;
 
-  .ams-checkbox__hover-indicator {
-    stroke: none;
-  }
-}
+  // Disabled
+  &:disabled + * {
+    color: var(--ams-checkbox-disabled-color);
+    cursor: var(--ams-checkbox-disabled-cursor);
 
-// Checked
-.ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-fill);
-  }
+    .ams-checkbox__rectangle {
+      stroke: var(--ams-checkbox-rectangle-disabled-stroke);
 
-  .ams-checkbox__checked-indicator {
-    display: block;
+      @media (forced-colors: active) {
+        stroke: GrayText;
+      }
+    }
   }
-}
 
-// Invalid checked
-.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
-  }
-}
+  // Indeterminate
+  &:indeterminate + * {
+    .ams-checkbox__rectangle {
+      fill: var(--ams-checkbox-rectangle-indeterminate-fill);
 
-// Invalid indeterminate
-.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
-  }
-}
+      @include forced-colors-selected;
+    }
 
-// Disabled checked
-.ams-checkbox__input:disabled:checked + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
+    .ams-checkbox__indeterminate-indicator {
+      display: block;
+    }
   }
-}
 
-// Disabled indeterminate
-.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
-  }
-}
+  // Checked
+  &:checked:not(:indeterminate) + * {
+    .ams-checkbox__rectangle {
+      fill: var(--ams-checkbox-rectangle-checked-fill);
 
-// HOVER
+      @include forced-colors-selected;
+    }
 
-// Checked hover
-.ams-checkbox__input:checked + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-hover-fill);
+    .ams-checkbox__checked-indicator {
+      display: block;
+    }
   }
-}
 
-// Indeterminate hover
-.ams-checkbox__input:indeterminate + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
-  }
-}
+  // Default hover
+  &:hover:not(:disabled) + * {
+    color: var(--ams-checkbox-hover-color);
+    text-decoration-line: var(--ams-checkbox-hover-text-decoration-line);
 
-// Invalid hover
-.ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
-  }
+    .ams-checkbox__rectangle {
+      @media (forced-colors: none) {
+        stroke: var(--ams-checkbox-rectangle-hover-stroke);
+      }
+    }
 
-  .ams-checkbox__hover-indicator {
-    stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
+    .ams-checkbox__hover-indicator {
+      @media (forced-colors: none) {
+        stroke: var(--ams-checkbox-hover-indicator-hover-stroke);
+      }
+    }
   }
-}
 
-// Disabled invalid hover
-.ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    stroke: var(--ams-checkbox-rectangle-hover-disabled-invalid-stroke);
-  }
-}
+  // Disabled indeterminate
+  &:disabled:indeterminate + * .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-fill);
 
-// Disabled checked hover
-.ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-disabled-hover-fill);
+    @include forced-colors-disabled;
   }
-}
 
-// Disabled indeterminate hover
-.ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-disabled-hover-fill);
+  // Disabled checked
+  &:disabled:checked + * .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-disabled-fill);
+
+    @include forced-colors-disabled;
   }
-}
 
-// Disabled hover
-.ams-checkbox__input:disabled + .ams-checkbox__label:hover {
-  text-decoration: none;
+  // Invalid
+  :is(&:invalid, &[aria-invalid="true"]):not(:disabled) + * .ams-checkbox__rectangle {
+    stroke: var(--ams-checkbox-rectangle-invalid-stroke);
 
-  .ams-checkbox__hover-indicator {
-    stroke: none;
+    @include forced-colors-selected;
   }
-}
 
-// Invalid checked hover
-.ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
-  }
-}
+  // Invalid indeterminate
+  :is(&:invalid, &[aria-invalid="true"]):indeterminate:not(:disabled) + * .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-fill);
 
-// Invalid indeterminate hover
-.ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
+    @include forced-colors-selected;
   }
-}
 
-// Disabled invalid checked hover
-.ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-checked-hover-disabled-invalid-fill);
-  }
-}
+  // Invalid checked
+  :is(&:invalid, &[aria-invalid="true"]):checked:not(:disabled) + * .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-invalid-fill);
 
-// Disabled invalid indeterminate hover
-.ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
-  .ams-checkbox__rectangle {
-    fill: var(--ams-checkbox-rectangle-indeterminate-hover-disabled-invalid-fill);
+    @include forced-colors-selected;
   }
-}
 
-// FORCED COLORS
+  // HOVER
 
-// Default
-@media (forced-colors: active) {
-  .ams-checkbox__label,
-  .ams-checkbox__label:hover,
-  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label,
-  .ams-checkbox__input[aria-invalid="true"] + .ams-checkbox__label:hover {
-    .ams-checkbox__rectangle {
-      fill: Canvas;
-      stroke: FieldText;
-    }
+  // Indeterminate hover
+  &:indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-hover-fill);
 
-    .ams-checkbox__hover-indicator {
-      stroke: none;
-    }
+    @include forced-colors-selected;
   }
-}
 
-// Checked
-@media (forced-colors: active) {
-  .ams-checkbox__input:checked:not(:indeterminate) + .ams-checkbox__label,
-  .ams-checkbox__input:checked + .ams-checkbox__label:hover,
-  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label,
-  .ams-checkbox__input[aria-invalid="true"]:checked + .ams-checkbox__label:hover {
-    .ams-checkbox__rectangle {
-      fill: ActiveText;
-      stroke: ActiveText;
-    }
+  // Checked hover
+  &:checked:not(:disabled, :indeterminate) + *:hover .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-hover-fill);
 
-    .ams-checkbox__checked-indicator {
-      stroke: Canvas;
-    }
+    @include forced-colors-selected;
   }
-}
 
-// Indeterminate
-@media (forced-colors: active) {
-  .ams-checkbox__input:indeterminate + .ams-checkbox__label,
-  .ams-checkbox__input:indeterminate + .ams-checkbox__label:hover,
-  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label,
-  .ams-checkbox__input[aria-invalid="true"]:indeterminate + .ams-checkbox__label:hover {
+  // Invalid hover
+  :is(&:invalid, &[aria-invalid="true"]):not(:disabled) + *:hover {
     .ams-checkbox__rectangle {
-      fill: ActiveText;
-      stroke: ActiveText;
+      stroke: var(--ams-checkbox-rectangle-invalid-hover-stroke);
     }
 
-    .ams-checkbox__indeterminate-indicator {
-      stroke: Canvas;
+    .ams-checkbox__hover-indicator {
+      @media (forced-colors: none) {
+        stroke: var(--ams-checkbox-hover-indicator-invalid-hover-stroke);
+      }
     }
   }
-}
 
-// Disabled
-@media (forced-colors: active) {
-  .ams-checkbox__input:disabled + .ams-checkbox__label,
-  .ams-checkbox__input:disabled + .ams-checkbox__label:hover,
-  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label,
-  .ams-checkbox__input[aria-invalid="true"]:disabled + .ams-checkbox__label:hover {
-    .ams-checkbox__rectangle {
-      stroke: GrayText;
-    }
-  }
-}
+  // Invalid indeterminate hover
+  :is(&:invalid, &[aria-invalid="true"]):indeterminate:not(:disabled) + *:hover .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-indeterminate-invalid-hover-fill);
 
-// Disabled checked
-@media (forced-colors: active) {
-  .ams-checkbox__input:disabled:checked + .ams-checkbox__label,
-  .ams-checkbox__input:disabled:checked + .ams-checkbox__label:hover,
-  .ams-checkbox__input[aria-invalid="true"]:disabled:checked + .ams-checkbox__label:hover {
-    .ams-checkbox__rectangle {
-      fill: GrayText;
-      stroke: GrayText;
-    }
+    @include forced-colors-selected;
   }
-}
 
-// Disabled indeterminate
-@media (forced-colors: active) {
-  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label,
-  .ams-checkbox__input:disabled:indeterminate + .ams-checkbox__label:hover,
-  .ams-checkbox__input[aria-invalid="true"]:disabled:indeterminate + .ams-checkbox__label:hover {
-    .ams-checkbox__rectangle {
-      fill: GrayText;
-    }
+  // Invalid checked hover
+  :is(&:invalid, &[aria-invalid="true"]):checked:not(:disabled) + *:hover .ams-checkbox__rectangle {
+    fill: var(--ams-checkbox-rectangle-checked-invalid-hover-fill);
+
+    @include forced-colors-selected;
   }
 }

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

@@ -10,6 +10,20 @@
   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;
+
+  &::-webkit-datetime-edit,
+  &::-webkit-datetime-edit-ampm-field,
+  &::-webkit-datetime-edit-day-field,
+  &::-webkit-datetime-edit-fields-wrapper,
+  &::-webkit-datetime-edit-hour-field,
+  &::-webkit-datetime-edit-millisecond-field,
+  &::-webkit-datetime-edit-minute-field,
+  &::-webkit-datetime-edit-month-field,
+  &::-webkit-datetime-edit-second-field,
+  &::-webkit-datetime-edit-week-field,
+  &::-webkit-datetime-edit-year-field {
+    padding-block: 0; // Override value of 1px in UA stylesheet
+  }
 }
 
 .ams-date-input {
@@ -61,16 +75,17 @@
   visibility: visible;
 }
 
-.ams-date-input:invalid,
-.ams-date-input[aria-invalid="true"] {
+.ams-date-input:not(:disabled):invalid,
+.ams-date-input:not(:disabled)[aria-invalid="true"] {
   border-color: var(--ams-date-input-invalid-border-color);
-
-  &:hover {
-    border-color: var(--ams-date-input-invalid-hover-border-color);
-    box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
-  }
 }
 
 .ams-date-input:not(:disabled):hover {
   box-shadow: var(--ams-date-input-hover-box-shadow);
 }
+
+.ams-date-input:not(:disabled):invalid:hover,
+.ams-date-input:not(:disabled)[aria-invalid="true"]:hover {
+  border-color: var(--ams-date-input-invalid-hover-border-color);
+  box-shadow: var(--ams-date-input-invalid-hover-box-shadow);
+}

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

@@ -48,6 +48,7 @@
   font-family: inherit;
   font-size: inherit; // iOS specific fix
   font-weight: inherit;
+  line-height: var(--ams-file-input-file-selector-button-line-height);
   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);

package/src/components/grid/README.md

@@ -19,4 +19,4 @@ Divides the screen into columns to align the elements of a page.
 
 ## Design
 
-The [design choices](/docs/brand-design-tokens-grid--docs) are described in the general documentation.
+The [design choices](/docs/docs-developer-guide-grid--docs) are described in the Developer Guide.

package/src/components/heading/README.md

@@ -6,12 +6,19 @@ Introduces a page section and describes the following content.
 
 ## Guidelines
 
-- Use Headings to allow the user to quickly grasp the structure of the page.
-- All headings together represent the document’s structure. Users of screen readers may use headings to navigate the page – an incorrect hierarchy will confuse them.
-- Every page should contain one heading with level 1.
-  Do not skip heading levels, e.g. a level 2 Heading should be followed by one with level 3, not level 4.
-  The `level` prop doesn’t have a default value; the correct level should be determined for each instance.
-- Don’t use a Heading just for its visual appearance.
+- Headings help the user scan the structure of a page.
+  They also introduce the content that follows them.
+- Users of screen readers often depend on headings to navigate a page.
+  If the hierarchy is wrong, it can confuse them.
+  That’s why it’s crucial to arrange headings properly.
+- The `level` prop doesn’t have a default value; determine the correct level for each instance.
+  - Every page should contain one heading with level 1.
+  - Do not skip levels. For example, a level 2 Heading must be followed by one with level 3.
+- Use the `size` prop to make a Heading visually larger or smaller, but sparingly and consistently.
+  - Content pages, e.g. for articles, products, events etc. must not use the size prop on their Headings.
+  - Most Headings on overview pages, e.g. Card, Table of Content, and ‘Link Blocks’, use a size of ‘level-3’.
+  - The same applies to large sections – e.g. Accordion, Alert, Dialog and the caption of a Table.
+    Most of them can be given a different size if appropriate.
 
 ## Relevant WCAG requirements
 

package/src/components/icon/README.md

@@ -6,6 +6,8 @@ Icons are visual symbols used to represent ideas, themes, or actions.
 They communicate the message at a glance and draw attention to important (interactive) information.
 Always use an `Icon` component to encapsulate an SVG icon for proper styling and sizing.
 
+Our icons can only be used on websites and applications where the City of Amsterdam is the main communicator.
+
 ## Interactive elements
 
 Use an icon to support textual interactive elements like buttons and links.

package/src/components/icon/icon.deprecated.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+// Deprecated. Use ‘heading 1’ instead.
+.ams-icon--heading-0 {
+  --ams-line-height: var(--ams-icon-heading-0-line-height);
+
+  font-size: var(--ams-icon-heading-0-font-size);
+  line-height: var(--ams-icon-heading-0-line-height);
+}

package/src/components/icon/icon.scss

@@ -8,7 +8,7 @@
 
   align-items: center;
   align-self: baseline; // Aligns the icon with text in flex or grid context
-  display: inline-flex;
+  display: inline-flex; // Center align the icon vertically, and override the default 'hidden' attribute
   font-size: var(--ams-icon-font-size);
   line-height: var(--ams-line-height);
 
@@ -43,6 +43,20 @@
   font-size: var(--ams-icon-large-font-size);
 }
 
+.ams-icon--heading-1 {
+  --ams-line-height: var(--ams-icon-heading-1-line-height);
+
+  font-size: var(--ams-icon-heading-1-font-size);
+  line-height: var(--ams-icon-heading-1-line-height);
+}
+
+.ams-icon--heading-2 {
+  --ams-line-height: var(--ams-icon-heading-2-line-height);
+
+  font-size: var(--ams-icon-heading-2-font-size);
+  line-height: var(--ams-icon-heading-2-line-height);
+}
+
 .ams-icon--heading-3 {
   --ams-line-height: var(--ams-icon-heading-3-line-height);
 

package/src/components/index.scss

@@ -14,6 +14,7 @@
 @use "breadcrumb/breadcrumb";
 @use "breakout/breakout";
 @use "button/button";
+@use "call-to-action-link/call-to-action-link";
 @use "card/card";
 @use "character-count/character-count";
 @use "checkbox/checkbox";
@@ -34,6 +35,7 @@
 @use "hint/hint";
 @use "icon-button/icon-button";
 @use "icon/icon";
+@use "icon/icon.deprecated" as *;
 @use "image-slider/image-slider";
 @use "image/image";
 @use "invalid-form-alert/invalid-form-alert";
@@ -43,12 +45,13 @@
 @use "logo/logo";
 @use "margin/margin";
 @use "mark/mark";
+@use "menu/menu";
 @use "ordered-list/ordered-list";
 @use "overlap/overlap";
 @use "page/page";
 @use "page-footer/page-footer";
 @use "page-header/page-header";
-@use "page-heading/page-heading";
+@use "page-heading/page-heading.deprecated" as *;
 @use "pagination/pagination";
 @use "paragraph/paragraph";
 @use "password-input/password-input";

package/src/components/invalid-form-alert/invalid-form-alert.scss

@@ -5,15 +5,4 @@
 
 .ams-invalid-form-alert {
   outline-offset: var(--ams-invalid-form-alert-outline-offset);
-
-  // In Chromium browsers, the outline overlaps with the border in this component.
-  // We're not sure why, but to fix this we double the offset for Chromium browsers here.
-  @supports (contain: paint) and (not (-moz-appearance: none)) {
-    outline-offset: calc(var(--ams-invalid-form-alert-outline-offset) * 2);
-
-    // Reset for Safari
-    @supports (font: -apple-system-body) {
-      outline-offset: var(--ams-invalid-form-alert-outline-offset);
-    }
-  }
 }

package/src/components/link/README.md

@@ -16,6 +16,7 @@ It is the lightweight variant for navigation.
   Use a button instead of a link when an action is desired.
 - An icon can be added to links, positioned after the link.
 - Too many links on the same page may confuse the user.
+- For a link on its own line of text, use the [Standalone Link](/docs/components-navigation-standalone-link--docs).
 
 ### External links
 

package/src/components/logo/README.md

@@ -34,7 +34,7 @@ The sub-brands are:
 - The logo links to the homepage of the website or application.
 - If the application is a form, application, or tool without a homepage, the logo links to the page where the form, application, or tool is referred to.
 
-The logo is 40 pixels tall at its minimum, growing to 56 pixels in wider windows.
+The logo is 40 pixels tall at its minimum, growing to 60 pixels in wider windows.
 This also applies to sub-brand logos.
 
 ## Download

package/src/components/menu/README.md

@@ -0,0 +1,8 @@
+<!-- @license CC0-1.0 -->
+
+# Menu
+
+A primary navigation leading to key areas of an application or website.
+
+The Menu component works well in the sidebar of applications, usually on a blue background.
+This first iteration is a simple vertical menu with 1 level of navigation.