@amsterdam/design-system-css 0.15.0 → 1.0.0

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

@@ -6,13 +6,14 @@
 @use "../../common/text-rendering" as *;
 
 @mixin reset-button {
-  border: none;
   border-radius: 0; // Reset rounded borders on iOS devices
 }
 
 .ams-file-input {
   background-color: var(--ams-file-input-background-color);
-  border: var(--ams-file-input-border);
+  border-color: var(--ams-file-input-border-color);
+  border-style: var(--ams-file-input-border-style);
+  border-width: var(--ams-file-input-border-width);
   box-sizing: border-box;
   color: var(--ams-file-input-color);
   cursor: var(--ams-file-input-cursor);
@@ -38,7 +39,9 @@
   -webkit-appearance: none; // Reset appearance for Safari < 15.4
   appearance: none; // Reset native appearance, this causes issues on iOS and Android devices
   background-color: var(--ams-file-input-file-selector-button-background-color);
-  box-shadow: var(--ams-file-input-file-selector-button-box-shadow);
+  border-color: var(--ams-file-input-file-selector-button-border-color);
+  border-style: var(--ams-file-input-file-selector-button-border-style);
+  border-width: var(--ams-file-input-file-selector-button-border-width);
   box-sizing: border-box;
   color: var(--ams-file-input-file-selector-button-color);
   cursor: var(--ams-file-input-file-selector-button-cursor);
@@ -50,16 +53,9 @@
   padding-inline: var(--ams-file-input-file-selector-button-padding-inline);
 
   @include reset-button;
-
-  @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
-  }
 }
 
 .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);
 }

package/src/components/grid/README.md

@@ -6,14 +6,15 @@ Divides the screen into columns to align the elements of a page.
 
 ## Guidelines
 
-- Every page should use the grid as the foundation for its layout.
-  It is placed directly within the [Screen](/docs/components-layout-screen--docs).
-- A [Footer](/docs/components-containers-footer--docs) and a [Spotlight](/docs/components-containers-spotlight--docs) are slightly wider than the grid.
-  You close one instance of the grid before these components.
-  Inside and optionally after them, you start a new one.
-  Multiple instances of the grid component are possible on a page, but the columns of all grids must align precisely.
-- Within the grid, you create cells containing the desired content.
-  A cell often spans multiple columns of the grid.
+- Every page uses the Grid component as the foundation for its layout.
+  It is a direct child of the [Page](/docs/components-containers-page--docs) container.
+- The Grid provides 4, 8, or 12 columns, depending on the width of the window.
+- Its children are `Grid.Cell` components that define how many columns they span, and optionally where they start.
+  Both its `span` and `start` properties accept a single value, or separate values for the narrow, medium and wide variations of the Grid.
+- A single page can have several Grids.
+  This allows mixing a Grid with a [Spotlight](/docs/components-containers-spotlight--docs), [Breakout](/docs/components-layout-breakout--docs) or full width [Image](/docs/components-media-image--docs) which ‘bleed out’ of the main layout.
+- Grids must not be nested.
+  The component is currently intended for the full width of the page only.
 - The Gap utility classes must not be used on the Grid component.
 
 ## Design

package/src/components/grid/_mixins.scss

@@ -1,16 +1,16 @@
-@use "../../common/breakpoint" as *;
-
 /**
  * @license EUPL-1.2+
  * Copyright Gemeente Amsterdam
  */
 
+@use "../../common/breakpoint" as *;
+
 @mixin ams-grid {
   column-gap: var(--ams-grid-column-gap);
   display: grid;
   grid-template-columns: repeat(var(--ams-grid-column-count), 1fr);
   padding-inline: var(--ams-grid-padding-inline);
-  row-gap: var(--ams-grid-row-gap-m);
+  row-gap: var(--ams-grid-row-gap-xl);
 
   @media screen and (min-width: $ams-breakpoint-medium) {
     grid-template-columns: repeat(var(--ams-grid-medium-column-count), 1fr);
@@ -29,52 +29,52 @@
   row-gap: initial;
 }
 
-@mixin ams-grid--gap-vertical--small {
-  row-gap: var(--ams-grid-row-gap-s);
-}
-
 @mixin ams-grid--gap-vertical--large {
   row-gap: var(--ams-grid-row-gap-l);
 }
 
-// Grid padding
-
-@mixin ams-grid--padding-bottom--small {
-  padding-block-end: var(--ams-grid-padding-block-s);
+@mixin ams-grid--gap-vertical--2x-large {
+  row-gap: var(--ams-grid-row-gap-2xl);
 }
 
-@mixin ams-grid--padding-bottom--medium {
-  padding-block-end: var(--ams-grid-padding-block-m);
-}
+// Grid padding
 
 @mixin ams-grid--padding-bottom--large {
   padding-block-end: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-top--small {
-  padding-block-start: var(--ams-grid-padding-block-s);
+@mixin ams-grid--padding-bottom--x-large {
+  padding-block-end: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-top--medium {
-  padding-block-start: var(--ams-grid-padding-block-m);
+@mixin ams-grid--padding-bottom--2x-large {
+  padding-block-end: var(--ams-grid-padding-block-2xl);
 }
 
 @mixin ams-grid--padding-top--large {
   padding-block-start: var(--ams-grid-padding-block-l);
 }
 
-@mixin ams-grid--padding-vertical--small {
-  padding-block: var(--ams-grid-padding-block-s);
+@mixin ams-grid--padding-top--x-large {
+  padding-block-start: var(--ams-grid-padding-block-xl);
 }
 
-@mixin ams-grid--padding-vertical--medium {
-  padding-block: var(--ams-grid-padding-block-m);
+@mixin ams-grid--padding-top--2x-large {
+  padding-block-start: var(--ams-grid-padding-block-2xl);
 }
 
 @mixin ams-grid--padding-vertical--large {
   padding-block: var(--ams-grid-padding-block-l);
 }
 
+@mixin ams-grid--padding-vertical--x-large {
+  padding-block: var(--ams-grid-padding-block-xl);
+}
+
+@mixin ams-grid--padding-vertical--2x-large {
+  padding-block: var(--ams-grid-padding-block-2xl);
+}
+
 @mixin ams-grid__cell--span-all {
   grid-column: 1 / -1;
 }

package/src/components/grid/grid.scss

@@ -18,52 +18,52 @@ $ams-grid-column-count: 12;
   @include ams-grid--gap-vertical--none;
 }
 
-.ams-grid--gap-vertical--small {
-  @include ams-grid--gap-vertical--small;
-}
-
 .ams-grid--gap-vertical--large {
   @include ams-grid--gap-vertical--large;
 }
 
-// Grid padding
-
-.ams-grid--padding-bottom--small {
-  @include ams-grid--padding-bottom--small;
+.ams-grid--gap-vertical--2x-large {
+  @include ams-grid--gap-vertical--2x-large;
 }
 
-.ams-grid--padding-bottom--medium {
-  @include ams-grid--padding-bottom--medium;
-}
+// Grid padding
 
 .ams-grid--padding-bottom--large {
   @include ams-grid--padding-bottom--large;
 }
 
-.ams-grid--padding-top--small {
-  @include ams-grid--padding-top--small;
+.ams-grid--padding-bottom--x-large {
+  @include ams-grid--padding-bottom--x-large;
 }
 
-.ams-grid--padding-top--medium {
-  @include ams-grid--padding-top--medium;
+.ams-grid--padding-bottom--2x-large {
+  @include ams-grid--padding-bottom--2x-large;
 }
 
 .ams-grid--padding-top--large {
   @include ams-grid--padding-top--large;
 }
 
-.ams-grid--padding-vertical--small {
-  @include ams-grid--padding-vertical--small;
+.ams-grid--padding-top--x-large {
+  @include ams-grid--padding-top--x-large;
 }
 
-.ams-grid--padding-vertical--medium {
-  @include ams-grid--padding-vertical--medium;
+.ams-grid--padding-top--2x-large {
+  @include ams-grid--padding-top--2x-large;
 }
 
 .ams-grid--padding-vertical--large {
   @include ams-grid--padding-vertical--large;
 }
 
+.ams-grid--padding-vertical--x-large {
+  @include ams-grid--padding-vertical--x-large;
+}
+
+.ams-grid--padding-vertical--2x-large {
+  @include ams-grid--padding-vertical--2x-large;
+}
+
 // Column span
 // The order of these declaration blocks ensures the intended specificity.
 

package/src/components/heading/heading.scss

@@ -17,6 +17,7 @@
   color: var(--ams-heading-color);
   font-family: var(--ams-heading-font-family);
   font-weight: var(--ams-heading-font-weight);
+  text-wrap: var(--ams-heading-text-wrap);
 
   @include hyphenation;
   @include text-rendering;

package/src/components/hint/hint.scss

@@ -4,6 +4,6 @@
  */
 
 .ams-hint {
-  color: var(--ams-hint-color);
   display: inline-block;
+  font-weight: var(--ams-hint-font-weight);
 }

package/src/components/icon/icon.scss

@@ -6,8 +6,9 @@
 .ams-icon {
   --ams-line-height: var(--ams-icon-line-height);
 
+  align-items: center;
   align-self: baseline; // Aligns the icon with text in flex or grid context
-  display: inline-flex; // Stretches the svg in order to align the icon vertically
+  display: inline-flex;
   font-size: var(--ams-icon-font-size);
   line-height: var(--ams-line-height);
 

package/src/components/icon-button/README.md

@@ -2,14 +2,15 @@
 
 # Icon Button
 
-A button containing only an icon.
+An icon in a button that can be aligned with text.
 
 ## Guidelines
 
-- Use this button only if the icon is entirely clear and understandable.
-  Many icons are interpreted differently by different users.
-  Only use universally recognized icons, such as a close icon or a play icon.
-- Provide a label text that describes what the button does for screen reader users.
+- Choose an Icon Button instead of a regular Button if it must align with text.
+  Match the size of the Icon Button to that text.
+- Only [functional icons](https://designsystem.amsterdam/?path=/docs/brand-assets-icons--docs#functional-icons) can be used in an Icon Button.
+  For other icons, use a [Button](https://designsystem.amsterdam/?path=/docs/components-buttons-button--docs) to allow the user to read its label.
+- Icon Button still needs a label to describe the button to users of screen readers.
 
 ## Relevant WCAG requirements
 

package/src/components/image/image.scss

@@ -7,8 +7,7 @@
   aspect-ratio: var(--ams-image-aspect-ratio);
   block-size: auto; /* [1] */
   font-style: italic; /* [3] */
-  inline-size: fit-content;
-  max-inline-size: 100%; /* [1] */
+  inline-size: 100%; /* [1] */
   object-fit: cover; /* [4] */
   vertical-align: middle; /* [2] */
 }

package/src/components/image-slider/README.md

@@ -19,7 +19,7 @@ The images do not slide automatically.
 - Feature the most essential image first.
 - Assume that some or many users will not navigate between the slides and only see the first image.
   Display all images separately if you want each of them to receive attention.
-- A full-width Image Slider should run from one edge of the Screen to the other;
+- A full-width Image Slider should run from one edge of the [Page](/docs/components-containers-page--docs) container to the other;
   position it next to a Grid, not in a Cell spanning all columns.
   Smaller sliders are fine in a Grid Cell.
 - Consult the [Image](/docs/components-media-image--docs) docs for guidelines on the individual images.

package/src/components/index.scss

@@ -28,10 +28,8 @@
 @use "figure/figure";
 @use "file-input/file-input";
 @use "file-list/file-list";
-@use "footer/footer";
 @use "gap/gap";
 @use "grid/grid";
-@use "header/header";
 @use "heading/heading";
 @use "hint/hint";
 @use "icon-button/icon-button";
@@ -45,21 +43,22 @@
 @use "logo/logo";
 @use "margin/margin";
 @use "mark/mark";
-@use "mega-menu/mega-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-menu/page-menu";
 @use "pagination/pagination";
 @use "paragraph/paragraph";
 @use "password-input/password-input";
 @use "radio/radio";
 @use "row/row";
-@use "screen/screen";
 @use "search-field/search-field";
 @use "select/select";
 @use "skip-link/skip-link";
 @use "spotlight/spotlight";
+@use "standalone-link/standalone-link";
 @use "switch/switch";
 @use "table-of-contents/table-of-contents";
 @use "table/table";
@@ -67,6 +66,5 @@
 @use "text-area/text-area";
 @use "text-input/text-input";
 @use "time-input/time-input";
-@use "top-task-link/top-task-link";
 @use "unordered-list/unordered-list";
 @use "visually-hidden/visually-hidden";

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

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
 .ams-invalid-form-alert {
   outline-offset: var(--ams-invalid-form-alert-outline-offset);
 

package/src/components/label/label.scss

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

package/src/components/link/README.md

@@ -7,16 +7,15 @@ It is the lightweight variant for navigation.
 
 ## Guidelines
 
-Use a link in the following cases:
-
-- To navigate to another page within the website or application
-- To navigate to another website (see [External links](#external-links))
-- To navigate to an element on the same page
-- To link to emails or phone numbers (start the link with `mailto:` or `tel:`)
-- Wrap 2 or more consecutive buttons and/or links in an [Action Group](https://designsystem.amsterdam/?path=/docs/components-layout-action-group--docs).
-
-A link is a navigation component.
-Use a button instead of a link when an action is desired.
+- Use a link in the following cases:
+  - To navigate to another page within the website or application
+  - To navigate to another website (see [External links](#external-links))
+  - To navigate to an element on the same page
+  - To link to emails or phone numbers (start the link with `mailto:` or `tel:`)
+- A link is a navigation component.
+  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.
 
 ### External links
 

package/src/components/link/link.scss

@@ -9,41 +9,19 @@
 .ams-link {
   color: var(--ams-link-color);
   font-family: var(--ams-link-font-family);
+  font-size: var(--ams-link-font-size);
   font-weight: var(--ams-link-font-weight);
+  line-height: var(--ams-link-line-height);
   outline-offset: var(--ams-link-outline-offset);
+  text-decoration-thickness: var(--ams-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-link-text-underline-offset);
 
   @include text-rendering;
 
   &:hover {
     color: var(--ams-link-hover-color);
-  }
-}
-
-.ams-link--standalone {
-  display: inline-block;
-  font-size: var(--ams-link-standalone-font-size);
-  line-height: var(--ams-link-standalone-line-height);
-  text-decoration-thickness: var(--ams-link-standalone-text-decoration-thickness);
-  text-underline-offset: var(--ams-link-standalone-text-underline-offset);
-
-  @include hyphenation;
-
-  &:hover {
-    text-decoration-thickness: var(--ams-link-standalone-hover-text-decoration-thickness);
-    text-underline-offset: var(--ams-link-standalone-hover-text-underline-offset);
-  }
-}
-
-.ams-link--inline {
-  font-family: var(--ams-link-inline-font-family);
-  font-size: var(--ams-link-inline-font-size);
-  line-height: var(--ams-link-inline-line-height);
-  text-decoration-thickness: var(--ams-link-inline-text-decoration-thickness);
-  text-underline-offset: var(--ams-link-inline-text-underline-offset);
-
-  &:hover {
-    text-decoration-thickness: var(--ams-link-inline-hover-text-decoration-thickness);
-    text-underline-offset: var(--ams-link-inline-hover-text-underline-offset);
+    text-decoration-thickness: var(--ams-link-hover-text-decoration-thickness);
+    text-underline-offset: var(--ams-link-hover-text-underline-offset);
   }
 }
 

package/src/components/logo/README.md

@@ -30,7 +30,7 @@ The sub-brands are:
 ## Requirements for all logos
 
 - The logo is always displayed.
-- The logo is left-aligned in the header.
+- The logo is left-aligned in the Page Header.
 - 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.
 

package/src/components/page/README.md

@@ -0,0 +1,23 @@
+<!-- @license CC0-1.0 -->
+
+# Page
+
+Contains the entire website.
+Sets the background colour and its maximum width, and is horizontally centered.
+
+## Guidelines
+
+- The Page component must be used on all websites for the City of Amsterdam.
+  Applications can use it as well, although a specific layout for them is in development.
+- It is the outermost container. Within it, combine components such as
+  [Grid](https://designsystem.amsterdam/?path=/docs/components-layout-grid--docs),
+  [Page Header](https://designsystem.amsterdam/?path=/docs/components-containers-page-header--docs),
+  [Page Footer](https://designsystem.amsterdam/?path=/docs/components-containers-page-footer--docs),
+  [Spotlight](https://designsystem.amsterdam/?path=/docs/components-containers-spotlight--docs),
+  [Image Slider](https://designsystem.amsterdam/?path=/docs/components-media-image-slider--docs),
+  and [Figure](https://designsystem.amsterdam/?path=/docs/components-media-figure--docs).
+
+## Design
+
+The Page container sets the maximum width for a website of the City of Amsterdam, which is 1600 pixels.
+It horizontally centres both itself and its content and sets a white background.

package/src/components/page/page.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+.ams-page {
+  background-color: var(--ams-page-background-color);
+  margin-inline: auto;
+  max-inline-size: var(--ams-page-max-inline-size);
+  min-block-size: 100vh; /* Fallback for browsers that do not support dvh */
+  min-block-size: 100dvh;
+}

package/src/components/{footer → page-footer}/README.md

@@ -1,16 +1,18 @@
 <!-- @license CC0-1.0 -->
 
-# Footer
+# Page Footer
 
 Provides service information at the bottom of every page.
 
 ## Guidelines
 
-- The Footer usually consists of two sections: a full-width blue area and a `Footer.Menu` below it.
-- Both sections are preceded by a visually hidden `Heading` for accessibility.
-- A Footer containing only a `Footer.Menu` can be sufficient for applications.
-- The Footer must be used on all websites for the City of Amsterdam.
+- The Page Footer must be used on all websites and applications for the City of Amsterdam.
+- It usually consists of two sections: a full-width blue `PageFooter.Spotlight` and a `PageFooter.Menu` below it.
+- `Footer.Menu` is preceded by a visually hidden `Heading` for accessibility.
+- A Page Footer containing only a `PageFooter.Menu` can be sufficient for applications.
+- The Page Footer must be used on all websites for the City of Amsterdam.
 - It must be the same on every page.
+- Set [the inverse colour](?path=/docs/brand-design-tokens-colour--docs#pairing-foreground-with-background-colours) on all text and links in this area.
 
 The top section offers space for various practical links:
 

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

@@ -0,0 +1,56 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@use "../../common/breakpoint" as *;
+@use "../../common/hyphenation" as *;
+@use "../../common/text-rendering" as *;
+
+@mixin reset-ul {
+  list-style: none;
+  margin-block: 0;
+}
+
+.ams-page-footer__spotlight {
+  background-color: var(--ams-page-footer-spotlight-background-color);
+}
+
+.ams-page-footer__menu {
+  column-gap: var(--ams-page-footer-menu-column-gap);
+  display: flex;
+  flex-wrap: wrap;
+  padding-block: var(--ams-page-footer-menu-padding-block);
+  padding-inline: var(--ams-page-footer-menu-padding-inline);
+  row-gap: var(--ams-page-footer-menu-row-gap);
+
+  @include reset-ul;
+
+  @media screen and (min-width: $ams-breakpoint-medium) {
+    padding-inline: var(--ams-page-footer-menu-medium-padding-inline);
+  }
+
+  @media screen and (min-width: $ams-breakpoint-wide) {
+    padding-inline: var(--ams-page-footer-menu-wide-padding-inline);
+  }
+}
+
+.ams-page-footer__menu-link {
+  color: var(--ams-page-footer-menu-link-color);
+  font-family: var(--ams-page-footer-menu-link-font-family);
+  font-size: var(--ams-page-footer-menu-link-font-size);
+  font-weight: var(--ams-page-footer-menu-link-font-weight);
+  line-height: var(--ams-page-footer-menu-link-line-height);
+  outline-offset: var(--ams-page-footer-menu-link-outline-offset);
+  text-decoration-line: var(--ams-page-footer-menu-link-text-decoration-line);
+  text-decoration-thickness: var(--ams-page-footer-menu-link-text-decoration-thickness);
+  text-underline-offset: var(--ams-page-footer-menu-link-text-underline-offset);
+
+  @include hyphenation;
+  @include text-rendering;
+
+  &:hover {
+    color: var(--ams-page-footer-menu-link-hover-color);
+    text-decoration-line: var(--ams-page-footer-menu-link-hover-text-decoration-line);
+  }
+}

package/src/components/{header → page-header}/README.md

@@ -1,17 +1,17 @@
 <!-- @license CC0-1.0 -->
 
-# Header
+# Page Header
 
 Displays the City’s logo at the top of every page, and optionally a navigation menu.
 Includes the name of the application if it is not the general website.
 
 ## Guidelines
 
-- The Header must be used on all websites and applications for the City of Amsterdam.
+- The Page Header must be used on all websites and applications for the City of Amsterdam.
 - It includes the logo of the City or the organization, the site title (except for the general website), and a menu with links to commonly used pages.
-- The Header is important because it conveys our corporate identity and is the first thing people see.
+- The Page Header is important because it conveys our corporate identity and is the first thing people see.
   Using it consistently helps users recognize and trust the website.
-- The Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
+- The Page Header is the same on every page of the application, although full-screen pages may hide it, e.g. a video or a map.
 - The inline menu can contain a maximum of 5 items.
   The last two will often be ‘Search’ and ‘Menu’.
 - The 'Menu' button opens a collapsible menu, which has room for more links.
@@ -22,5 +22,5 @@ Includes the name of the application if it is not the general website.
 
 ## References
 
-- A Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
+- A Page Header is a [landmark](https://www.w3.org/TR/wai-aria-practices-1.1/#aria_landmark_roles) and can be used to group navigation elements.
 - [WCAG 3.2.3](https://wcag.com/designers/3-2-3-consistent-navigation/) Consistent Navigation: Navigation menus that appear on multiple pages are consistent.