@amsterdam/design-system-css 0.5.0 → 0.6.1

package/src/components/grid/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Grid
 
 Divides the screen into columns to align the elements of a page.
@@ -5,9 +7,9 @@ Divides the screen into columns to align the elements of a page.
 ## Usage
 
 Every page should use the grid as the foundation for its layout.
-It is placed directly within the [Screen](?path=/docs/layout-screen--docs).
+It is placed directly within the [Screen](/docs/components-layout-screen--docs).
 
-A [Footer](?path=/docs/react_containers-footer--docs) and a [Spotlight](?path=/docs/react_containers-spotlight--docs) are slightly wider than the grid.
+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.
@@ -17,4 +19,4 @@ A cell often spans multiple columns of the grid.
 
 ## Design
 
-The [design choices](?path=/docs/docs-designrichtlijnen-grid--docs) are described in the design guidelines.
+The [design choices](/docs/docs-design-guidelines-grid--docs) are described in the design guidelines.

package/src/components/grid/grid.scss

@@ -1,15 +1,16 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/breakpoint";
 
 .amsterdam-grid {
+  column-gap: var(--amsterdam-grid-column-gap);
   display: grid;
-  gap: var(--amsterdam-grid-gap);
   grid-template-columns: repeat(var(--amsterdam-grid-column-count), 1fr);
   padding-inline: var(--amsterdam-grid-padding-inline);
+  row-gap: var(--amsterdam-grid-row-gap-md);
 
   @media screen and (min-width: $amsterdam-breakpoint-medium) {
     grid-template-columns: repeat(var(--amsterdam-grid-medium-column-count), 1fr);
@@ -25,47 +26,47 @@
 }
 
 .amsterdam-grid--gap-vertical--small {
-  row-gap: calc(var(--amsterdam-grid-gap) / 2);
+  row-gap: var(--amsterdam-grid-row-gap-sm);
 }
 
 .amsterdam-grid--gap-vertical--large {
-  row-gap: calc(var(--amsterdam-grid-gap) * 2);
+  row-gap: var(--amsterdam-grid-row-gap-lg);
 }
 
 .amsterdam-grid--padding-bottom--small {
-  padding-block-end: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-bottom--medium {
-  padding-block-end: var(--amsterdam-grid-gap);
+  padding-block-end: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-bottom--large {
-  padding-block-end: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-end: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-top--small {
-  padding-block-start: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-top--medium {
-  padding-block-start: var(--amsterdam-grid-gap);
+  padding-block-start: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-top--large {
-  padding-block-start: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block-start: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid--padding-vertical--small {
-  padding-block: calc(var(--amsterdam-grid-gap) / 2);
+  padding-block: var(--amsterdam-grid-padding-block-sm);
 }
 
 .amsterdam-grid--padding-vertical--medium {
-  padding-block: var(--amsterdam-grid-gap);
+  padding-block: var(--amsterdam-grid-padding-block-md);
 }
 
 .amsterdam-grid--padding-vertical--large {
-  padding-block: calc(var(--amsterdam-grid-gap) * 2);
+  padding-block: var(--amsterdam-grid-padding-block-lg);
 }
 
 .amsterdam-grid__cell--span-all {

package/src/components/header/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Header
 
 Arranges the City’s logo, the title of the website, and a page menu.

package/src/components/header/header.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/breakpoint";
@@ -9,7 +9,7 @@
   align-items: center;
   display: flex;
   flex-wrap: wrap;
-  padding-block: 1rem;
+  padding-block: var(--amsterdam-header-padding-block);
   row-gap: 1.5rem;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {
@@ -18,9 +18,9 @@
   }
 }
 
-.amsterdam-header__logo {
+.amsterdam-header__logo-link {
   flex: none;
-  outline-offset: var(--amsterdam-link-outline-offset);
+  outline-offset: var(--amsterdam-header-logo-link-outline-offset);
 }
 
 .amsterdam-header__links {
@@ -38,7 +38,7 @@
 
 .amsterdam-header__menu {
   flex: 1;
-  padding-inline-start: var(--amsterdam-page-menu-column-gap);
+  padding-inline-start: var(--amsterdam-page-menu-column-gap); // TODO Don’t use tokens of another component
   text-align: end;
 
   @media screen and (min-width: $amsterdam-breakpoint-wide) {

package/src/components/heading/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Heading
 
 A heading conveys information about the content below it.

package/src/components/heading/heading.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/hyphenation";

package/src/components/icon/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Icon
 
 Icons are visual symbols used to represent ideas, themes, or actions.
@@ -26,4 +28,4 @@ Icons are aligned to the left of the text by default and vertically centred to t
 
 Icons use the same text levels as all typographic components to determine their size.
 This ensures easy alignment between icons and text.
-[Refer to the typography documentation for more information](/docs/docs-designrichtlijnen-typografie--docs#tekstniveaus).
+[Refer to the typography documentation for more information](/docs/docs-design-guidelines-typography--docs).

package/src/components/icon/icon.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-icon {

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Icon Button
 
 A button containing only an icon.
@@ -11,4 +13,4 @@ A button containing only an icon.
 
 ## Relevant WCAG Requirements
 
-The Icon Button follows [the same requirements and guidelines as a regular button](https://amsterdam.github.io/design-system/?path=/docs/react_buttons-button--docs).
+The Icon Button follows [the same requirements and guidelines as a regular button](/docs/components-buttons-button--docs).

package/src/components/icon-button/icon-button.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {

package/src/components/image/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Image
 
 Displays an image.
@@ -13,7 +15,7 @@ Displays an image.
   For example, provide small, medium, and large variants for various screen sizes.
   This prevents unnecessary downloading of large files.
   Do this especially for the main image of a page, where the difference between sizes on a narrow and wide screen is most significant.
-- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](?path=/docs/layout-aspect-ratio--docs) component.
+- Ensure that the aspect ratio of the image is supported by the [Aspect Ratio](/docs/components-layout-aspect-ratio--docs) component.
 
 ## Relevant WCAG Requirements
 

package/src/components/image/image.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-image {
@@ -15,6 +15,6 @@
 }
 
 // [1] Allow for fluid image sizing while maintaining aspect ratio governed by width/height attributes
-// [2] Remove ‘phantom’ whitespace
+// [2] Remove ‘phantom’ white space
 // [3] Italicise alt text to visually offset it from surrounding copy
 // Source: https://x.com/csswizardry/status/1717841334462005661

package/src/components/index.scss

@@ -1,9 +1,17 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 /* Append here */
+@import "./row/row";
+@import "./radio/radio";
+@import "./tabs/tabs";
+@import "./text-area/text-area";
+@import "./column/column";
+@import "./margin/margin";
+@import "./gap/gap";
+@import "./fieldset/fieldset";
 @import "./link-list/link-list";
 @import "./badge/badge";
 @import "./table/table";

package/src/components/link/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Link
 
 A link is a navigation element and can be used independently or inline with text.

package/src/components/link/link.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Link List
 
 A collection of related links.
@@ -13,4 +15,4 @@ Therefore, it is blue and clickable.
 
 Use a Link List to present multiple links within a theme.
 
-For additional guidelines, refer to the [Link](?path=/docs/navigation-link--docs) component.
+For additional guidelines, refer to the [Link](/docs/components-navigation-link--docs) component.

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

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2024 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/hyphenation";

package/src/components/logo/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Logo
 
 The City’s logo includes an icon (3 Saint Andrew’s crosses) and a wordmark (Gemeente Amsterdam).
@@ -14,12 +16,13 @@ In the meantime, you can download an image of this logo from [Stijlweb](https://
 
 ## Exception
 
-Use a sub-brand logo if the website is owned by one of the 4 sub-brands.
+Use a sub-brand logo if the website is owned by one of the 5 sub-brands.
 They have a separate status because of their unique service provision not directly associated with the City.
 
 The sub-brands are:
 
 - GGD Amsterdam
+- Museum Weesp
 - Stadsarchief
 - Stadsbank van Lening
 - VGA Verzekeringen

package/src/components/logo/logo.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-logo {

package/src/components/margin/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Margin
+
+Use these utility classes to add white space below a single element.

package/src/components/margin/margin.scss

@@ -0,0 +1,12 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+@each $size in map-keys($amsterdam-sizes) {
+  .amsterdam-mb--#{$size} {
+    margin-block-end: var(--amsterdam-margin-#{$size}) !important;
+  }
+}

package/src/components/mark/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Mark
 
 Highlights a text fragment using a yellow background.

package/src/components/mark/mark.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-mark {

package/src/components/mega-menu/README.md

@@ -1 +1,3 @@
+<!-- @license CC0-1.0 -->
+
 # Mega Menu

package/src/components/mega-menu/mega-menu.scss

@@ -1,11 +1,13 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-mega-menu__list-category {
   column-gap: var(--amsterdam-mega-menu-list-category-column-gap);
   column-width: var(--amsterdam-mega-menu-list-category-column-width);
+
+  // TODO Move to bottom margin of heading
   padding-block-start: var(--amsterdam-mega-menu-list-category-padding-block-start);
 
   &:not(:last-child) {

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Ordered List
 
 An ordered list is a vertical group of related content with an order.

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

@@ -1,9 +1,9 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
-/** Apply border box sizing, reset whitespace and list styles. */
+/** Apply border box sizing, reset white space and list styles. */
 @mixin reset {
   box-sizing: border-box;
   list-style-type: none;
@@ -36,6 +36,10 @@
   }
 }
 
+.amsterdam-ordered-list--inverse-color:not(.amsterdam-ordered-list--no-markers) {
+  color: var(--amsterdam-ordered-list-inverse-color);
+}
+
 /** A nested list has a different marker and less indentation for correct alignment. */
 :is(.amsterdam-ordered-list, .amsterdam-unordered-list) .amsterdam-ordered-list {
   list-style-type: var(--amsterdam-ordered-list-ordered-list-list-style-type);

package/src/components/overlap/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Overlap
 
 Displays two or more components on top of each other.

package/src/components/overlap/overlap.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-overlap {

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Page Heading
 
 The page heading component is a prominent text at the beginning of a page, immediately after the header.
@@ -14,4 +16,4 @@ Use this component for a name, title, or motto.
 The page heading component is a variant of a heading level 1 with a distinct style.
 When using this component, ensure that the heading hierarchy of the page remains logical.
 
-For this component, the same WCAG requirements apply as for [the heading component](https://amsterdam.github.io/design-system/?path=/docs/react_text-heading--docs).
+For this component, the same WCAG requirements apply as for [the heading component](/docs/components-text-heading--docs).

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

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/hyphenation";

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

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Page Menu
 
 A small set of links for use in the Header and Footer.
@@ -15,4 +17,4 @@ A small set of links for use in the Header and Footer.
 
 - [Consistent Navigation (Level AA)](https://www.w3.org/WAI/WCAG21/Understanding/consistent-navigation.html)
 
-PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+PageMenu is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

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

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset-list {

package/src/components/pagination/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Pagination
 
 Pagination is a navigation element used to navigate between multiple pages of overview lists.
@@ -16,4 +18,4 @@ Pagination indicates the current page and allows users to navigate to other page
 
 ## Relevant WCAG Rules
 
-Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Pagination is an interactive element, and the [general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

package/src/components/pagination/pagination.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin list-reset {
@@ -38,7 +38,7 @@
   display: flex;
   gap: 0.5rem;
   outline-offset: var(--amsterdam-pagination-button-outline-offset);
-  padding-inline: 0.75rem;
+  padding-inline: var(--amsterdam-pagination-button-padding-inline);
   text-decoration-line: var(--amsterdam-pagination-button-text-decoration-line);
   text-decoration-thickness: var(--amsterdam-pagination-button-text-decoration-thickness);
   text-underline-offset: var(--amsterdam-pagination-button-text-underline-offset);

package/src/components/paragraph/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Paragraph
 
 Represents a paragraph of running text, form instructions, and other standalone text fragments.

package/src/components/paragraph/paragraph.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @mixin reset {

package/src/components/radio/README.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Radio
+
+Allows users to select one option from a list.
+
+## Guidelines
+
+- Do not assume that users will know how many options they can select based on the visual difference between radios and checkboxes alone.
+  If needed, add a hint explaining this, for example, ‘Select one option’.
+- Order radio options alphabetically by default.
+  In some cases, it can be helpful to order them from most-to-least common options.
+  For example, you could order options for ‘Where do you live?’ based on population size.
+  However you should do this with extreme caution as it can reinforce bias.
+  If in doubt, order alphabetically.
+- Labels should be concise. Try to keep labels shorter than 4 words.
+
+Use a [Checkbox](/docs/components-forms-checkbox--docs) when a user can select more than 1 option from a list.