@amsterdam/design-system-css 0.15.0 → 1.0.0

package/src/components/{header/header.scss → page-header/page-header.scss}

@@ -6,35 +6,51 @@
 @use "../../common/breakpoint" as *;
 @use "../../common/text-rendering" as *;
 
-.ams-header {
+.ams-page-header {
   /*
   * The logo link section is created twice: once outside the navigation and once hidden inside it.
   * This keeps all navigation in one nav element and lets the menu wrap around the logo link section.
   * Display grid is used to let both logo link sections overlap.
   */
   display: grid;
-  font-family: var(--ams-header-font-family);
-  padding-block: var(--ams-header-padding-block);
-  padding-inline: var(--ams-header-padding-inline);
+  font-family: var(--ams-page-header-font-family);
+  padding-block: var(--ams-page-header-padding-block);
+  padding-inline: var(--ams-page-header-padding-inline);
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-page-header-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    padding-inline: var(--ams-page-header-wide-padding-inline);
+  }
 }
 
-.ams-header__logo-link {
+.ams-page-header__logo-link {
   align-items: center;
   align-self: start; // To align the logo link section to the top of the header when it wraps
-  column-gap: var(--ams-header-logo-link-column-gap);
+  column-gap: var(--ams-page-header-logo-link-column-gap);
   display: flex;
   grid-area: 1 / 1; // To allow this section to overlap with the second logo link section
   inline-size: fit-content;
-  outline-offset: var(--ams-header-logo-link-outline-offset);
+  outline-offset: var(--ams-page-header-logo-link-outline-offset);
   text-decoration: none;
+
+  @media (forced-colors: active) {
+    .ams-logo__emblem,
+    .ams-logo__text-primary,
+    .ams-logo__text-secondary {
+      fill: LinkText;
+    }
+  }
 }
 
-.ams-header__logo-link--hidden {
+.ams-page-header__logo-link--hidden {
   opacity: 0%;
   user-select: none; // The hidden logo link section should not be selectable
 }
 
-.ams-header__logo-container {
+.ams-page-header__logo-container {
   flex-shrink: 0;
   inline-size: 0.75rem;
   overflow: hidden;
@@ -44,22 +60,23 @@
   }
 }
 
-.ams-header__brand-name {
-  color: var(--ams-header-brand-name-color);
-  font-size: var(--ams-header-brand-name-font-size);
-  font-weight: var(--ams-header-brand-name-font-weight);
-  line-height: 1.35;
+.ams-page-header__brand-name {
+  color: var(--ams-page-header-brand-name-color);
+  font-size: var(--ams-page-header-brand-name-font-size);
+  font-weight: var(--ams-page-header-brand-name-font-weight);
+  line-height: var(--ams-page-header-brand-name-line-height);
+  text-wrap: var(--ams-page-header-brand-name-text-wrap);
 }
 
-.ams-header__navigation {
-  column-gap: var(--ams-header-navigation-column-gap);
+.ams-page-header__navigation {
+  column-gap: var(--ams-page-header-navigation-column-gap);
   display: flex;
   flex-wrap: wrap;
   grid-area: 1 / 1; // To allow this section to overlap with the logo link section
   // This section blocks pointer events initially, so the hidden logo link section can't be activated.
   // The menu and collapsible menu set it back to auto, to make sure they can be activated.
   pointer-events: none;
-  row-gap: var(--ams-header-navigation-row-gap);
+  row-gap: var(--ams-page-header-navigation-row-gap);
 }
 
 @mixin reset-list {
@@ -68,62 +85,62 @@
   padding-inline-start: 0;
 }
 
-.ams-header__menu {
+.ams-page-header__menu {
   align-items: center;
-  column-gap: var(--ams-header-menu-column-gap);
+  column-gap: var(--ams-page-header-menu-column-gap);
   display: flex;
   flex-wrap: wrap;
   justify-content: flex-end;
   margin-inline-start: auto;
   pointer-events: auto; // Set pointer events back to auto to allow the menu to be activated
-  row-gap: var(--ams-header-menu-row-gap);
+  row-gap: var(--ams-page-header-menu-row-gap);
 
   @include reset-list;
 }
 
 // Do not show menu items below the wide breakpoint...
-.ams-header__menu-item {
+.ams-page-header__menu-item {
   @media screen and (not (min-width: $ams-breakpoint-wide)) {
     display: none;
   }
 }
 
 // ...unless they're fixed.
-.ams-header__menu-item--fixed {
+.ams-page-header__menu-item--fixed {
   display: revert;
 }
 
-@mixin header-menu-action {
-  color: var(--ams-header-menu-item-color);
-  font-size: var(--ams-header-menu-item-font-size);
-  font-weight: var(--ams-header-menu-item-font-weight);
-  line-height: var(--ams-header-menu-item-line-height);
-  outline-offset: var(--ams-header-menu-item-outline-offset);
-  padding-block: var(--ams-header-menu-item-padding-block);
+@mixin page-header-menu-action {
+  color: var(--ams-page-header-menu-item-color);
+  font-size: var(--ams-page-header-menu-item-font-size);
+  font-weight: var(--ams-page-header-menu-item-font-weight);
+  line-height: var(--ams-page-header-menu-item-line-height);
+  outline-offset: var(--ams-page-header-menu-item-outline-offset);
+  padding-block: var(--ams-page-header-menu-item-padding-block);
   touch-action: manipulation;
   white-space: nowrap;
 
   @include text-rendering;
 
   &:hover {
-    color: var(--ams-header-menu-item-hover-color);
+    color: var(--ams-page-header-menu-item-hover-color);
   }
 }
 
-.ams-header__menu-link {
+.ams-page-header__menu-link {
   display: inline-block;
-  text-decoration-line: var(--ams-header-menu-link-text-decoration-line);
-  text-decoration-thickness: var(--ams-header-menu-link-text-decoration-thickness);
-  text-underline-offset: var(--ams-header-menu-link-text-underline-offset);
+  text-decoration-line: var(--ams-page-header-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-header-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-header-menu-link-text-underline-offset);
 
-  @include header-menu-action;
+  @include page-header-menu-action;
 
   &:hover {
-    text-decoration-line: var(--ams-header-menu-link-hover-text-decoration-line);
+    text-decoration-line: var(--ams-page-header-menu-link-hover-text-decoration-line);
   }
 }
 
-.ams-header__mega-menu-button-item--hide-on-wide-window {
+.ams-page-header__mega-menu-button-item--hide-on-wide-window {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }
@@ -139,36 +156,36 @@
   // [1] Remove the margin in older Safari.
 }
 
-.ams-header__mega-menu-button {
-  column-gap: var(--ams-header-menu-item-column-gap);
-  cursor: var(--ams-header-mega-menu-button-cursor);
+.ams-page-header__mega-menu-button {
+  column-gap: var(--ams-page-header-menu-item-column-gap);
+  cursor: var(--ams-page-header-mega-menu-button-cursor);
   display: grid;
   font-family: inherit;
   grid-auto-flow: column;
 
-  @include header-menu-action;
+  @include page-header-menu-action;
   @include reset-button;
 }
 
-.ams-header__mega-menu-button[aria-expanded="true"] {
-  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
+.ams-page-header__mega-menu-button[aria-expanded="true"] {
+  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
 }
 
-.ams-header__mega-menu-button-label,
-.ams-header__mega-menu-button-hidden-label {
+.ams-page-header__mega-menu-button-label,
+.ams-page-header__mega-menu-button-hidden-label {
   grid-area: 1 / 1; // To allow the label and the hidden label to overlap
 }
 
 // This hidden label is used to prevent a layout shift when the mega menu is opened
 // and the button text becomes bold.
-.ams-header__mega-menu-button-hidden-label {
-  font-weight: var(--ams-header-mega-menu-button-label-open-font-weight);
+.ams-page-header__mega-menu-button-hidden-label {
+  font-weight: var(--ams-page-header-mega-menu-button-label-open-font-weight);
   pointer-events: none;
   user-select: none;
   visibility: hidden;
 }
 
-.ams-header__menu-icon {
+.ams-page-header__menu-icon {
   line {
     stroke: currentColor;
     stroke-width: 3px;
@@ -183,30 +200,30 @@
     }
   }
 
-  .ams-header__menu-icon-top {
+  .ams-page-header__menu-icon-top {
     translate: 0 -7px;
   }
 
-  .ams-header__menu-icon-bottom {
+  .ams-page-header__menu-icon-bottom {
     translate: 0 7px;
   }
 }
 
-.ams-header__menu-icon--open {
-  .ams-header__menu-icon-top {
+.ams-page-header__menu-icon--open {
+  .ams-page-header__menu-icon-top {
     rotate: 45deg;
     translate: 0;
   }
-  .ams-header__menu-icon-middle {
+  .ams-page-header__menu-icon-middle {
     opacity: 0%;
   }
-  .ams-header__menu-icon-bottom {
+  .ams-page-header__menu-icon-bottom {
     rotate: -45deg;
     translate: 0;
   }
 }
 
-.ams-header__mega-menu {
+.ams-page-header__mega-menu {
   inline-size: 100%;
   pointer-events: auto; // Set pointer events back to auto to allow the mega menu to be activated
 
@@ -217,11 +234,11 @@
   }
 }
 
-.ams-header__mega-menu--closed.ams-header__mega-menu--closed {
+.ams-page-header__mega-menu--closed.ams-page-header__mega-menu--closed {
   display: none;
 }
 
-.ams-header__grid-cell-narrow-window-only {
+.ams-page-header__grid-cell-narrow-window-only {
   @media screen and (min-width: $ams-breakpoint-wide) {
     display: none;
   }

package/src/components/page-heading/README.md

@@ -2,7 +2,7 @@
 
 # Page Heading
 
-The page heading component is a prominent text at the beginning of a page, immediately after the header.
+The page heading component is a prominent text at the beginning of a page, immediately after the Page Header.
 Use this component for a name, title, or motto.
 
 ## Guidelines

package/src/components/page-heading/page-heading.scss

@@ -19,6 +19,7 @@
   font-size: var(--ams-page-heading-font-size);
   font-weight: var(--ams-page-heading-font-weight);
   line-height: var(--ams-page-heading-line-height);
+  text-wrap: var(--ams-page-heading-text-wrap);
 
   @include hyphenation;
   @include text-rendering;

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

@@ -8,21 +8,22 @@
 @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: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-password-input {
   background-color: var(--ams-password-input-background-color);
-  box-shadow: var(--ams-password-input-box-shadow);
+  border-color: var(--ams-password-input-border-color);
+  border-style: var(--ams-password-input-border-style);
+  border-width: var(--ams-password-input-border-width);
   box-sizing: border-box;
   color: var(--ams-password-input-color);
   font-family: var(--ams-password-input-font-family);
   font-size: var(--ams-password-input-font-size);
   font-weight: var(--ams-password-input-font-weight);
-  inline-size: 100%;
   line-height: var(--ams-password-input-line-height);
+  max-inline-size: 100%;
   outline-offset: var(--ams-password-input-outline-offset);
   padding-block: var(--ams-password-input-padding-block);
   padding-inline: var(--ams-password-input-padding-inline);
@@ -30,10 +31,10 @@
 
   @include text-rendering;
   @include reset-input;
+}
 
-  &:hover {
-    box-shadow: var(--ams-password-input-hover-box-shadow);
-  }
+.ams-password-input:not([size]) {
+  inline-size: 100%;
 }
 
 .ams-password-input::placeholder {
@@ -42,17 +43,20 @@
 }
 
 .ams-password-input:disabled {
-  background-color: var(--ams-password-input-disabled-background-color);
-  box-shadow: var(--ams-password-input-disabled-box-shadow);
   color: var(--ams-password-input-disabled-color);
   cursor: var(--ams-password-input-disabled-cursor);
 }
 
 .ams-password-input:invalid,
 .ams-password-input[aria-invalid="true"] {
-  box-shadow: var(--ams-password-input-invalid-box-shadow);
+  border-color: var(--ams-password-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-password-input-invalid-hover-border-color);
     box-shadow: var(--ams-password-input-invalid-hover-box-shadow);
   }
 }
+
+.ams-password-input:not(:disabled):hover {
+  box-shadow: var(--ams-password-input-hover-box-shadow);
+}

package/src/components/radio/radio.scss

@@ -41,13 +41,10 @@
 .ams-radio__circle {
   fill: var(--ams-radio-circle-fill);
   stroke: var(--ams-radio-circle-stroke);
-  stroke-width: var(--ams-radio-circle-stroke-width);
 }
 
 .ams-radio__hover-indicator {
-  fill: none;
-  stroke: transparent;
-  stroke-width: var(--ams-radio-hover-indicator-stroke-width);
+  stroke: none;
 }
 
 .ams-radio__checked-indicator {
@@ -169,9 +166,14 @@
   .ams-radio__input[aria-invalid="true"] + .ams-radio__label,
   .ams-radio__input[aria-invalid="true"] + .ams-radio__label:hover {
     .ams-radio__circle {
+      fill: Canvas;
       stroke: FieldText;
     }
 
+    .ams-radio__hover-indicator {
+      stroke: none;
+    }
+
     .ams-radio__checked-indicator {
       fill: FieldText;
     }

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

@@ -13,14 +13,15 @@
 @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: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-search-field__input {
   background-color: var(--ams-search-field-input-background-color);
-  box-shadow: var(--ams-search-field-input-box-shadow);
+  border-color: var(--ams-search-field-input-border-color);
+  border-style: var(--ams-search-field-input-border-style);
+  border-width: var(--ams-search-field-input-border-width);
   box-sizing: border-box;
   color: var(--ams-search-field-input-color);
   font-family: var(--ams-search-field-input-font-family);
@@ -47,9 +48,10 @@
 
 .ams-search-field__input:invalid,
 .ams-search-field__input[aria-invalid="true"] {
-  box-shadow: var(--ams-search-field-input-invalid-box-shadow);
+  border-color: var(--ams-search-field-input-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-search-field-input-invalid-hover-border-color);
     box-shadow: var(--ams-search-field-input-invalid-hover-box-shadow);
   }
 }

package/src/components/select/select.scss

@@ -5,13 +5,14 @@
 
 @mixin reset-select {
   appearance: none; // Reset native appearance to hide default chevron
-  border: none;
   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);
+  border-color: var(--ams-select-border-color);
+  border-style: var(--ams-select-border-style);
+  border-width: var(--ams-select-border-width);
   color: var(--ams-select-color);
   font-family: var(--ams-select-font-family);
   font-size: var(--ams-select-font-size);
@@ -31,32 +32,37 @@
     background-repeat: no-repeat;
     background-size: 1em 1em;
   }
-
-  &:hover {
-    box-shadow: var(--ams-select-hover-box-shadow);
-  }
 }
 
 .ams-select:invalid,
 .ams-select[aria-invalid="true"] {
-  box-shadow: var(--ams-select-invalid-box-shadow);
+  border-color: var(--ams-select-invalid-border-color);
 }
 
 .ams-select:disabled {
-  box-shadow: var(--ams-select-disabled-box-shadow);
   color: var(--ams-select-disabled-color);
   cursor: var(--ams-select-disabled-cursor);
 
   &:not([multiple]) {
     background-image: var(--ams-select-disabled-background-image);
+
+    /* stylelint-disable no-descending-specificity */
+    &:hover {
+      background-image: var(--ams-select-hover-background-image);
+    }
   }
 }
 
 .ams-select:invalid:hover,
 .ams-select[aria-invalid="true"]:hover {
+  border-color: var(--ams-select-invalid-hover-border-color);
   box-shadow: var(--ams-select-invalid-hover-box-shadow);
 }
 
+.ams-select:not(:disabled):hover {
+  box-shadow: var(--ams-select-hover-box-shadow);
+}
+
 .ams-select__option:disabled {
   color: var(--ams-select-option-disabled-color);
 }

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

@@ -6,13 +6,13 @@ Allows skipping past recurring navigation blocks at the top of a page.
 
 ## Design
 
-The Skip Link sits above the header and is as wide as the Screen container.
+The Skip Link sits above the Page Header and is as wide as the Page container.
 It remains hidden until activated with the ‘Tab’ key.
-After appearing, it pushes the entire page down.
+After appearing, it pushes the rest of the page down.
 
 ## Guidelines
 
-- Place the Skip Link as the first element in the Screen.
+- Place the Skip Link as the first element in the [Page](/docs/components-containers-page--docs) container.
 - Target the Skip Link to the main content.
   On an article page, for example, it could be the title of the article.
   On a search page, it could be the search field.

package/src/components/spotlight/README.md

@@ -6,13 +6,12 @@ Emphasizes a section on a page through a distinctive background colour.
 
 ## Guidelines
 
-- 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).
+- Display the Spotlight at the entire width of the [Page](/docs/components-containers-page--docs) container; do not position it on the [Grid](/docs/components-layout-grid--docs).
 - Add a Grid with medium vertical padding inside the Spotlight to add whitespace around the content, even for a single element.
 - Use any of the [highlight colours](/docs/brand-design-tokens-colour--docs) for the background.
   The design system does not prescribe a meaning to any of these colours.
   The default is purple.
-- Use the default text colour (black) on an azure, lime, orange or yellow background.
-  Use the inverse text colour (white) on a green, magenta or purple background.
+- Select [the correct colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) for text and links against the background you choose.
 
 ## Relevant WCAG requirements
 

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

@@ -0,0 +1,11 @@
+<!-- @license CC0-1.0 -->
+
+# Standalone Link
+
+A navigation element that is seperated from the text around it.
+
+## Guidelines
+
+- Use a Standalone Link for links that need to stand out.
+- Use a regular [Link](/docs/components-navigation-link--docs) within sentences or paragraphs of text.
+- For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

package/src/components/standalone-link/standalone-link.scss

@@ -0,0 +1,53 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
+.ams-standalone-link {
+  color: var(--ams-standalone-link-color);
+  column-gap: var(--ams-standalone-link-column-gap);
+  display: inline-flex;
+  font-family: var(--ams-standalone-link-font-family);
+  font-size: var(--ams-standalone-link-font-size);
+  font-weight: var(--ams-standalone-link-font-weight);
+  line-height: var(--ams-standalone-link-line-height);
+  outline-offset: var(--ams-standalone-link-outline-offset);
+  text-decoration-thickness: var(--ams-standalone-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-standalone-link-text-underline-offset);
+
+  @include hyphenation;
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-standalone-link-hover-color);
+    text-decoration-thickness: var(--ams-standalone-link-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-standalone-link-hover-text-underline-offset);
+  }
+}
+
+.ams-standalone-link--contrast {
+  color: var(--ams-standalone-link-contrast-color);
+
+  &:hover {
+    color: var(--ams-standalone-link-contrast-hover-color);
+  }
+}
+
+.ams-standalone-link--inverse {
+  color: var(--ams-standalone-link-inverse-color);
+
+  &:hover {
+    color: var(--ams-standalone-link-inverse-hover-color);
+  }
+}
+
+.ams-standalone-link--with-icon {
+  text-decoration-line: var(--ams-standalone-link-with-icon-text-decoration-line);
+
+  &:hover {
+    text-decoration-line: var(--ams-standalone-link-with-icon-hover-text-decoration-line);
+  }
+}

package/src/components/switch/switch.scss

@@ -12,7 +12,7 @@
 }
 
 .ams-switch__label {
-  --ams-switch-track-border-width: 0.0625rem;
+  --ams-switch-track-border-width: var(--ams-border-width-m);
 
   background-color: var(--ams-switch-background-color);
 

package/src/components/tabs/README.md

@@ -10,7 +10,7 @@ Tabs are used to bundle related content in a compact overview within a page. Eac
 - 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.
+  The button has an `aria-controls` attribute that matches the `id` of the associated panel.
 
 You can navigate tabs with your keyboard:
 

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

@@ -8,14 +8,15 @@
 @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: none;
   border-radius: 0; // Reset rounded borders on iOS devices
   margin-block: 0;
 }
 
 .ams-text-area {
   background-color: var(--ams-text-area-background-color);
-  box-shadow: var(--ams-text-area-box-shadow);
+  border-color: var(--ams-text-area-border-color);
+  border-style: var(--ams-text-area-border-style);
+  border-width: var(--ams-text-area-border-width);
   box-sizing: border-box;
   color: var(--ams-text-area-color);
   font-family: var(--ams-text-area-font-family);
@@ -32,10 +33,6 @@
 
   @include text-rendering;
   @include reset-textarea;
-
-  &:hover {
-    box-shadow: var(--ams-text-area-hover-box-shadow);
-  }
 }
 
 .ams-text-area::placeholder {
@@ -44,21 +41,24 @@
 }
 
 .ams-text-area:disabled {
-  background-color: var(--ams-text-area-disabled-background-color);
-  box-shadow: var(--ams-text-area-disabled-box-shadow);
   color: var(--ams-text-area-disabled-color);
   cursor: var(--ams-text-area-disabled-cursor);
 }
 
 .ams-text-area:invalid,
 .ams-text-area[aria-invalid="true"] {
-  box-shadow: var(--ams-text-area-invalid-box-shadow);
+  border-color: var(--ams-text-area-invalid-border-color);
 
   &:hover {
+    border-color: var(--ams-text-area-invalid-hover-border-color);
     box-shadow: var(--ams-text-area-invalid-hover-box-shadow);
   }
 }
 
+.ams-text-area:not(:disabled):hover {
+  box-shadow: var(--ams-text-area-hover-box-shadow);
+}
+
 .ams-text-area--resize-none {
   resize: none;
 }