@amsterdam/design-system-css 0.5.0 → 0.6.1

package/dist/unordered-list/unordered-list.css.map

@@ -1 +1 @@
-{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,oDACA,wDACA,wDACA,gEAGA,qGACE,6EACA,+EAKJ,iFACE,+EAEA,iHACE,4FACA","file":"unordered-list.css"}
+{"version":3,"sourceRoot":"","sources":["../../src/components/unordered-list/unordered-list.scss"],"names":[],"mappings":"AAeA,0BARE,sBACA,gBACA,eACA,uBACA,8BAOA,aACA,wCAIF,qEACE,4CACA,wDACA,oDACA,wDACA,wDACA,gEAGA,qGACE,6EACA,+EAIJ,oFACE,oDAIF,iFACE,+EAEA,iHACE,4FACA","file":"unordered-list.css"}

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "0.5.0",
+  "version": "0.6.1",
   "author": "Community for NL Design System",
   "description": "CSS files for components for the City of Amsterdam based on the NL Design System architecture",
   "license": "EUPL-1.2",
@@ -14,8 +14,8 @@
     "directory": "packages/css"
   },
   "devDependencies": {
-    "sass": "1.70.0",
-    "@amsterdam/design-system-tokens": "0.5.0"
+    "sass": "1.71.1",
+    "@amsterdam/design-system-tokens": "0.6.1"
   },
   "dependencies": {
     "@utrecht/components": "3.0.0"

package/src/common/breakpoint.scss

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

package/src/common/calculate-fluid-style.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @use "sass:math";

package/src/common/hide-input.scss

@@ -0,0 +1,11 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@mixin hide-input {
+  appearance: none;
+  margin-block: 0;
+  margin-inline: 0;
+  opacity: 0%; /* to hide native input field in older iOS */
+}

package/src/common/hyphenation.scss

@@ -1,3 +1,8 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
 @mixin hyphenation {
   hyphenate-limit-chars: var(--amsterdam-hyphenation-hyphenate-limit-chars);
   hyphens: var(--amsterdam-hyphenation-hyphens);

package/src/common/input-label-focus.scss

@@ -0,0 +1,21 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/**
+  * Focus is first set on the label next to a focussed input, and then
+  * hidden when the focussed input doesn't have focus-visible.
+  * This progressive enhancement means you get the benefits of focus-visible
+  * while still showing a focus ring on browsers that don't support focus-visible (like older Safari).
+  */
+
+@mixin input-label-focus {
+  &:focus + label {
+    outline: auto;
+  }
+
+  &:focus:not(:focus-visible) + label {
+    outline: 0;
+  }
+}

package/src/common/size.scss

@@ -0,0 +1,13 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+/** The set of available options for sizing. */
+$amsterdam-sizes: (
+  "xs": "extra-small",
+  "sm": "small",
+  "md": "medium",
+  "lg": "large",
+  "xl": "extra-large",
+);

package/src/components/accordion/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Accordion
 
 The accordion component is a clickable (vertically stacked) list of headings to hide or show associated content.

package/src/components/accordion/accordion.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-accordion__header {
@@ -24,8 +24,8 @@
   font-weight: var(--amsterdam-accordion-button-font-weight);
   justify-content: space-between;
   line-height: var(--amsterdam-accordion-button-line-height);
-  padding-block: 0.75rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-accordion-button-padding-block);
+  padding-inline: var(--amsterdam-accordion-button-padding-inline);
   width: 100%;
 
   &:focus {
@@ -54,8 +54,8 @@
 
 .amsterdam-accordion__panel {
   display: none;
-  padding-block: 1rem;
-  padding-inline: 1rem;
+  padding-block: var(--amsterdam-accordion-panel-padding-block);
+  padding-inline: var(--amsterdam-accordion-panel-padding-inline);
 }
 
 .amsterdam-accordion__panel--expanded {

package/src/components/alert/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Alert
 
 An Alert informs the user of a significant or time-sensitive message without interrupting their task.
@@ -15,8 +17,8 @@ There are four types of notifications:
 
 - Place an orange Alert directly below the Header for important and urgent information.
   Examples: system outage or changes in the opening hours of a City Office.
-- Ensure sufficient whitespace around the Alert.
-  The grid’s whitespace is a good reference – place the Alert in its own cell.
+- Ensure sufficient white space around the Alert.
+  The grid’s white space is a good reference – place the Alert in its own cell.
 - By default, the Alert cannot be closed.
   This functionality can be added optionally.
 - Optionally, the title can be omitted.

package/src/components/alert/alert.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 .amsterdam-alert {
@@ -11,10 +11,8 @@
   flex-direction: row;
   gap: var(--amsterdam-alert-gap);
   justify-content: space-between;
-  padding-block-end: var(--amsterdam-alert-padding-block-end);
-  padding-block-start: var(--amsterdam-alert-padding-block-start);
-  padding-inline-end: var(--amsterdam-alert-padding-inline-end);
-  padding-inline-start: var(--amsterdam-alert-padding-inline-start);
+  padding-block: var(--amsterdam-alert-padding-block);
+  padding-inline: var(--amsterdam-alert-padding-inline);
 }
 
 .amsterdam-alert__content {

package/src/components/aspect-ratio/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Aspect Ratio
 
 Aspect Ratio updates the height of an element with its width.

package/src/components/aspect-ratio/aspect-ratio.scss

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

package/src/components/badge/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Badge
 
 A prominently coloured box containing 1 or 2 words.

package/src/components/badge/badge.scss

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

package/src/components/blockquote/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Blockquote
 
 We use blockquotes to emphasize citations.

package/src/components/blockquote/blockquote.scss

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

package/src/components/breadcrumb/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Breadcrumb
 
 The breadcrumb is a secondary navigation pattern that helps a user understand the structure between levels in the website up to the current page.

package/src/components/breadcrumb/breadcrumb.scss

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

package/src/components/button/README.md

@@ -1,10 +1,12 @@
+<!-- @license CC0-1.0 -->
+
 # Button
 
 Allows the user to perform actions and operate the user interface.
 
 ## Guidelines
 
-- A label text that describes the function of the button.
+- A short label text that describes the function of the button.
 - A clear contrasting colour scheme so that it is easy to recognize and quickly locate.
 - Use the correct type of button for the corresponding application.
   For example, a button within a form must always be of the type `submit`.

package/src/components/button/button.scss

@@ -1,44 +1,90 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
-@import "../../../node_modules/@utrecht/components/button/css";
-
 @mixin reset {
   -webkit-text-size-adjust: 100%;
 }
 
 .amsterdam-button {
+  border: none;
+  cursor: var(--amsterdam-button-cursor);
+  display: inline-flex;
+  font-family: var(--amsterdam-button-font-family);
   font-size: var(--amsterdam-button-font-size);
+  gap: var(--amsterdam-button-gap);
   line-height: var(--amsterdam-button-line-height);
+  outline-offset: var(--amsterdam-button-outline-offset);
+  padding-block: var(--amsterdam-button-padding-block);
+  padding-inline: var(--amsterdam-button-padding-inline);
+  touch-action: manipulation;
+
+  &:disabled,
+  &[aria-disabled="true"] {
+    cursor: var(--amsterdam-button-disabled-cursor);
+  }
 
   @include reset;
 }
 
+@mixin amsterdam-button-forced-color-mode {
+  @media screen and (-ms-high-contrast: active), screen and (forced-colors: active) {
+    border: 2px solid ButtonBorder; // add border because forced colors changes box-shadow to none
+  }
+}
+
+.amsterdam-button--primary {
+  background-color: var(--amsterdam-button-primary-background-color);
+  box-shadow: var(--amsterdam-button-primary-box-shadow);
+  color: var(--amsterdam-button-primary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-primary-disabled-background-color);
+    box-shadow: var(--amsterdam-button-primary-disabled-box-shadow);
+  }
+
+  &:hover:not(:disabled, [aria-disabled="true"]) {
+    background-color: var(--amsterdam-button-primary-hover-background-color);
+    box-shadow: var(--amsterdam-button-primary-hover-box-shadow);
+  }
+
+  @include amsterdam-button-forced-color-mode;
+}
+
 .amsterdam-button--secondary {
+  background-color: var(--amsterdam-button-secondary-background-color);
   box-shadow: var(--amsterdam-button-secondary-box-shadow);
+  color: var(--amsterdam-button-secondary-color);
 
   &:disabled,
   [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-secondary-disabled-background-color);
     box-shadow: var(--amsterdam-button-secondary-disabled-box-shadow);
+    color: var(--amsterdam-button-secondary-disabled-color);
   }
 
   &:hover:not(:disabled, [aria-disabled="true"]) {
     box-shadow: var(--amsterdam-button-secondary-hover-box-shadow);
+    color: var(--amsterdam-button-secondary-hover-color);
   }
-}
 
-.amsterdam-button--secondary:focus:not(:hover, [aria-disabled="true"]) {
-  box-shadow: var(--amsterdam-button-secondary-focus-box-shadow);
+  @include amsterdam-button-forced-color-mode;
 }
 
 .amsterdam-button--tertiary {
+  background-color: var(--amsterdam-button-tertiary-background-color);
+  color: var(--amsterdam-button-tertiary-color);
+
+  &:disabled,
+  [aria-disabled="true"] {
+    background-color: var(--amsterdam-button-tertiary-disabled-background-color);
+    color: var(--amsterdam-button-tertiary-disabled-color);
+  }
+
   &:hover:not(:disabled, [aria-disabled="true"]) {
     box-shadow: var(--amsterdam-button-tertiary-hover-box-shadow);
+    color: var(--amsterdam-button-tertiary-hover-color);
   }
 }
-
-.amsterdam-button--tertiary:focus:not(:hover, [aria-disabled="true"]) {
-  box-shadow: none;
-}

package/src/components/card/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Card
 
 Use a card on an overview page to link to an article page, such as a news article, a job vacancy, or a search result.
@@ -7,15 +9,15 @@ The link is mandatory.
 ## Guidelines
 
 - The title of a card is a link within a heading.
-  The same guidelines as for regular [links](?path=/docs/react_navigation-link--docs) and [headings](?path=/docs/react_text-heading--docs) apply here.
+  The same guidelines as for regular [links](/docs/components-navigation-link--docs) and [headings](/docs/components-text-heading--docs) apply here.
   The link is active across the entire area of the card.
 - A card needs more content than just a title.
   Supplement this with textual and/or visual content.
 - Place the text in a regular paragraph.
   Only use the smallest text size for a tagline or date.
 - This component may not be the best option if the content does not represent a detailed page.
-  For referencing a thematic page, use a [top task link](?path=/docs/react_navigation-top-task-link--docs).
-  You can also use a [regular link](?path=/docs/react_navigation-link--docs).
+  For referencing a thematic page, use a [top task link](/docs/components-navigation-top-task-link--docs).
+  You can also use a [regular link](/docs/components-navigation-link--docs).
 
 ## Screen Readers
 

package/src/components/card/card.scss

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

package/src/components/checkbox/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Checkbox
 
 Allows users to make a selection or agree to terms.
@@ -25,4 +27,4 @@ It is written in the first person when asking the user to agree to the terms and
 
 - [WCAG 1.3.5](https://www.w3.org/WAI/WCAG21/Understanding/identify-input-purpose.html): It is clear for both users and programmatically what the purpose of a form field is.
 
-Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](https://amsterdam.github.io/design-system/?path=/docs/docs-designrichtlijnen-interactieve-elementen--docs) apply.
+Checkbox is an interactive element; therefore, [the general requirements and guidelines for interactive elements](/docs/docs-design-guidelines-interactive-elements--docs) apply.

package/src/components/checkbox/checkbox.scss

@@ -1,18 +1,14 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
+@import "../../common/input-label-focus";
+@import "../../common/hide-input";
+
 .amsterdam-checkbox__input {
-  appearance: none;
-  margin-block: 0;
-  margin-inline: 0;
-  opacity: 0%; /* to hide native input field in older iOS */
-
-  &:focus-visible + label {
-    outline: auto;
-    outline-offset: var(--amsterdam-checkbox-outline-offset);
-  }
+  @include hide-input;
+  @include input-label-focus;
 }
 
 .amsterdam-checkbox__checkmark {
@@ -23,9 +19,12 @@
   width: 1.5rem;
 
   &::after {
+    background-position: center;
+    background-repeat: no-repeat;
+    background-size: 1rem;
     border-color: var(--amsterdam-checkbox-checkmark-border-color);
     border-style: solid;
-    border-width: 2px;
+    border-width: 0.125rem;
     box-sizing: border-box;
     content: "";
     height: 1.5rem;
@@ -43,9 +42,10 @@
   display: inline-flex;
   font-family: var(--amsterdam-checkbox-font-family);
   font-size: var(--amsterdam-checkbox-font-size);
-  font-weight: 400;
+  font-weight: var(--amsterdam-checkbox-font-weight);
   gap: 0.5rem;
   line-height: var(--amsterdam-checkbox-line-height);
+  outline-offset: var(--amsterdam-checkbox-outline-offset);
 
   &:hover {
     color: var(--amsterdam-checkbox-hover-color);
@@ -55,7 +55,7 @@
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-hover-border-color);
-      border-width: 3px;
+      border-width: 0.1875rem;
     }
   }
 
@@ -66,10 +66,7 @@
 .amsterdam-checkbox__input:checked {
   + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
     background-color: var(--amsterdam-checkbox-checkmark-checked-background-color);
-    background-image: url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20viewBox%3D%220%200%2032%2032%22%20fill%3D%22%23ffffff%22%3E%3Cpath%20fill-rule%3D%22evenodd%22%20d%3D%22M12.216%2027.016%200%2014.168l2.91-2.77%209.346%209.837L29.129%204%2032%206.8z%22%2F%3E%3C%2Fsvg%3E");
-    background-position: center;
-    background-repeat: no-repeat;
-    background-size: 1rem;
+    background-image: var(--amsterdam-checkbox-checkmark-checked-background-image);
     border: none;
   }
 }
@@ -78,7 +75,7 @@
 .amsterdam-checkbox__input:indeterminate {
   + .amsterdam-checkbox__label .amsterdam-checkbox__checkmark::after {
     background-color: var(--amsterdam-checkbox-checkmark-indeterminate-background-color);
-    background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAzMiAzMiIgZmlsbD0id2hpdGUiPjxwYXRoIGZpbGwtcnVsZT0iZXZlbm9kZCIgZD0iTTAgMTMuNzE0aDMydjRIMHoiLz48L3N2Zz4=");
+    background-image: var(--amsterdam-checkbox-checkmark-indeterminate-background-image);
     background-position: center;
     background-repeat: no-repeat;
     background-size: 1rem;
@@ -102,7 +99,7 @@
 
     .amsterdam-checkbox__checkmark::after {
       border-color: var(--amsterdam-checkbox-checkmark-disabled-border-color);
-      border-width: 2px;
+      border-width: 0.125rem;
     }
   }
 }

package/src/components/column/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Column
+
+Stacks its children vertically and adds a vertical gap between them.

package/src/components/column/column.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+.amsterdam-column {
+  display: grid;
+}
+
+@each $size, $label in $amsterdam-sizes {
+  .amsterdam-column--#{$label} {
+    gap: var(--amsterdam-column-gap-#{$size});
+  }
+}

package/src/components/dialog/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Dialog
 
 A Dialog allows the user to focus on one task or a piece of information by popping up and blocking the page content until the modal task is completed or until the user dismisses the action.

package/src/components/dialog/dialog.scss

@@ -1,6 +1,6 @@
 /**
  * @license EUPL-1.2+
- * Copyright (c) 2023 Gemeente Amsterdam
+ * Copyright Gemeente Amsterdam
  */
 
 @import "../../common/breakpoint";
@@ -26,6 +26,8 @@
   gap: var(--amsterdam-dialog-form-gap);
   grid-template-rows: auto 1fr auto;
   max-block-size: var(--amsterdam-dialog-form-max-block-size);
+
+  // TODO Decide on these widths
   padding-block: var(--amsterdam-dialog-form-padding-block);
   padding-inline: var(--amsterdam-dialog-form-padding-inline);
 }
@@ -36,7 +38,6 @@
   max-block-size: 100%; /* safari */
   overflow-y: auto;
   overscroll-behavior-y: contain;
-  padding-inline-end: var(--amsterdam-dialog-article-padding-inline-end);
 }
 
 .amsterdam-dialog__header {

package/src/components/fieldset/README.md

@@ -0,0 +1,18 @@
+<!-- @license CC0-1.0 -->
+
+# Fieldset
+
+A component to group related form inputs.
+
+## Guidelines
+
+- Use Fieldset when you need to show a relationship between multiple form inputs. For example, you may need to group a set of text inputs into a single fieldset when asking for an address.
+- When grouping radio inputs, use `role="radiogroup"` on Fieldset to have this grouping explicitly announced as a radio group. Fieldset has a default role of `group`.
+
+## Relevant WCAG Requirements
+
+- [WCAG 1.3.5](https://www.w3.org/WAI/WCAG22/Understanding/identify-input-purpose.html): Fieldset labels the purpose of a group of inputs.
+
+## References
+
+- [Providing a description for groups of form controls using fieldset and legend elements](https://www.w3.org/WAI/WCAG22/Techniques/html/H71)

package/src/components/fieldset/fieldset.scss

@@ -0,0 +1,34 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/hyphenation";
+
+@mixin reset {
+  border: none;
+  margin-inline: 0;
+  padding-block: 0;
+  padding-inline: 0;
+}
+
+.amsterdam-fieldset {
+  @include reset;
+}
+
+@mixin legend-reset {
+  padding-inline: 0;
+  -webkit-text-size-adjust: 100%;
+}
+
+.amsterdam-fieldset__legend {
+  color: var(--amsterdam-fieldset-legend-color);
+  font-family: var(--amsterdam-fieldset-legend-font-family);
+  font-size: var(--amsterdam-fieldset-legend-font-size);
+  font-weight: var(--amsterdam-fieldset-legend-font-weight);
+  line-height: var(--amsterdam-fieldset-legend-line-height);
+  margin-block-end: 1rem; /* Because of a bug in Chrome we can’t use display grid or flex for this gap */
+
+  @include hyphenation;
+  @include legend-reset;
+}

package/src/components/footer/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Footer
 
 The footer is the closing section on every web page.

package/src/components/form-label/README.md

@@ -1,3 +1,5 @@
+<!-- @license CC0-1.0 -->
+
 # Form Label
 
 Describes a form control.

package/src/components/form-label/form-label.scss

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

package/src/components/gap/README.md

@@ -0,0 +1,5 @@
+<!-- @license CC0-1.0 -->
+
+# Gap
+
+Use these utility classes to add consistent white space between a set of elements.

package/src/components/gap/gap.scss

@@ -0,0 +1,16 @@
+/**
+ * @license EUPL-1.2+
+ * Copyright Gemeente Amsterdam
+ */
+
+@import "../../common/size";
+
+[class|="amsterdam-gap-"] {
+  display: grid !important;
+}
+
+@each $size in map-keys($amsterdam-sizes) {
+  .amsterdam-gap--#{$size} {
+    gap: var(--amsterdam-gap-#{$size}) !important;
+  }
+}