@amsterdam/design-system-tokens 2.1.0 → 3.0.0

package/dist/index.theme.css

@@ -13,8 +13,8 @@
   --ams-border-width-m: 0.125rem;
   --ams-border-width-l: 0.1875rem;
   --ams-border-width-xl: 0.25rem;
-  --ams-color-interactive-secondary: #181818; /** Use `currentColor` instead */
-  --ams-color-interactive-contrast: #181818;
+  --ams-color-interactive-secondary: #202020; /** Use `currentColor` instead */
+  --ams-color-interactive-contrast: #202020;
   --ams-color-interactive: #004699;
   --ams-color-interactive-disabled: #767676;
   --ams-color-interactive-hover: #003677;
@@ -24,17 +24,17 @@
   --ams-color-background: #ffffff;
   --ams-color-feedback-error: #ec0000;
   --ams-color-feedback-info: #009de6;
-  --ams-color-feedback-success: #00a03c;
+  --ams-color-feedback-success: #00893c;
   --ams-color-feedback-warning: #ff9100;
   --ams-color-highlight-azure: #009de6;
-  --ams-color-highlight-green: #00a03c;
+  --ams-color-highlight-green: #00893c;
   --ams-color-highlight-lime: #bed200;
   --ams-color-highlight-magenta: #e50082;
   --ams-color-highlight-orange: #ff9100;
   --ams-color-highlight-purple: #a00078;
   --ams-color-highlight-yellow: #ffe600;
   --ams-color-separator: #d1d1d1;
-  --ams-color-text: #181818;
+  --ams-color-text: #202020;
   --ams-color-text-inverse: #ffffff;
   --ams-color-text-secondary: #767676;
   --ams-cursor-disabled: not-allowed;
@@ -91,8 +91,8 @@
   --ams-button-tertiary-background-color: transparent;
   --ams-button-tertiary-border-color: transparent;
   --ams-button-tertiary-hover-border-color: currentColor;
-  --ams-call-to-action-link-background-color: #00a03c;
-  --ams-call-to-action-link-hover-background-color: #007c2e;
+  --ams-call-to-action-link-background-color: #00893c;
+  --ams-call-to-action-link-hover-background-color: #10552b;
   --ams-date-input-disabled-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
   --ams-date-input-disabled-calendar-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23767676'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>");
   --ams-date-input-hover-calender-picker-indicator-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 36 36' fill='%23003677'><path d='M28 6V2h-4v4H12V2H8v4H2v28h32V6zm2 24H6V14h24z'/><path d='M10 17h4v4h-4zm6 0h4v4h-4zm6 0h4v4h-4zm-12 6h4v4h-4zm6 0h4v4h-4z'/></svg>"); /** Use the token with ‘calendar’ spelled correctly instead */
@@ -132,6 +132,8 @@
   --ams-ordered-list-ordered-list-item-padding-inline-start: 0.25rem; /** The total level >=2 indentation for Amsterdam is 28 pixels, or 1.75rem. */
   --ams-page-footer-spotlight-background-color: #004699;
   --ams-page-max-inline-size: 90rem;
+  --ams-page-with-menu-max-inline-size: 120rem;
+  --ams-paragraph-large-text-wrap: balance;
   --ams-search-field-input-cancel-button-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='M29.333 5.47 26.53 2.668 16 13.187 5.47 2.666 2.668 5.47 13.187 16 2.666 26.53l2.804 2.803L16 18.813l10.53 10.52 2.803-2.804L18.813 16z'/></svg>");
   --ams-select-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23004699' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
   --ams-select-disabled-background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'><path fill='%23767676' fill-rule='evenodd' d='m16 25.757-16-16 2.91-2.9L16 19.937l13.09-13.08 2.91 2.9z'/></svg>");
@@ -413,15 +415,22 @@
   --ams-error-message-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-error-message-gap: var(--ams-space-xs);
   --ams-error-message-line-height: var(--ams-typography-body-text-line-height);
-  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
-  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
+  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-color: var(--ams-color-text);
   --ams-field-set-legend-font-family: var(--ams-typography-font-family);
   --ams-field-set-legend-font-weight: var(--ams-typography-heading-font-weight);
   --ams-field-set-legend-line-height: var(--ams-typography-heading-3-line-height);
-  --ams-field-set-legend-margin-block-end: var(--ams-space-s);
   --ams-field-set-legend-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-field-set-legend-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-field-set-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-set-child-before-error-message-margin-block-end: var(--ams-space-s);
+  --ams-field-set-child-before-field-or-field-set-margin-block-end: var(--ams-space-m);
+  --ams-field-set-child-between-fields-and-field-sets-margin-block-end: var(--ams-space-l);
+  --ams-field-set-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
+  --ams-field-set-invalid-padding-inline-start: var(--ams-space-m);
   --ams-field-gap: var(--ams-space-s);
+  --ams-field-child-margin-block-end: var(--ams-space-xs);
+  --ams-field-child-before-error-message-margin-block-end: var(--ams-space-s);
   --ams-field-invalid-border-inline-start: var(--ams-border-width-l) solid var(--ams-color-feedback-error);
   --ams-field-invalid-padding-inline-start: var(--ams-space-m);
   --ams-figure-gap: var(--ams-space-s);
@@ -471,6 +480,7 @@
   --ams-heading-text-wrap: var(--ams-typography-heading-text-wrap);
   --ams-heading-inverse-color: var(--ams-color-text-inverse);
   --ams-hint-font-weight: var(--ams-typography-body-text-font-weight);
+  --ams-hint-in-fieldset-color: var(--ams-color-text-secondary);
   --ams-icon-button-color: var(--ams-color-interactive);
   --ams-icon-button-cursor: var(--ams-cursor-interactive);
   --ams-icon-button-outline-offset: var(--ams-focus-outline-offset);
@@ -515,6 +525,7 @@
   --ams-label-font-weight: var(--ams-typography-heading-font-weight);
   --ams-label-line-height: var(--ams-typography-heading-3-line-height);
   --ams-label-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-label-in-fieldset-font-weight: var(--ams-typography-body-text-font-weight);
   --ams-link-list-gap: var(--ams-space-s);
   --ams-link-list-link-font-family: var(--ams-typography-font-family);
   --ams-link-list-link-font-size: var(--ams-typography-body-text-font-size);
@@ -588,6 +599,7 @@
   --ams-page-header-brand-name-font-weight: var(--ams-typography-heading-font-weight);
   --ams-page-header-brand-name-line-height: var(--ams-typography-heading-3-line-height);
   --ams-page-header-brand-name-text-wrap: var(--ams-typography-heading-text-wrap);
+  --ams-page-header-mega-menu-padding-block: var(--ams-space-l);
   --ams-page-header-mega-menu-button-cursor: var(--ams-cursor-interactive);
   --ams-page-header-mega-menu-button-label-open-font-weight: var(--ams-typography-body-text-bold-font-weight);
   --ams-page-header-menu-column-gap: var(--ams-space-l);
@@ -599,12 +611,13 @@
   --ams-page-header-menu-item-line-height: var(--ams-typography-body-text-line-height);
   --ams-page-header-menu-item-outline-offset: var(--ams-focus-outline-offset);
   --ams-page-header-menu-item-padding-block: var(--ams-space-xs);
+  --ams-page-header-menu-link-gap: var(--ams-space-xs);
   --ams-page-header-menu-link-text-decoration-line: var(--ams-links-subtle-text-decoration-line);
   --ams-page-header-menu-link-text-decoration-thickness: var(--ams-links-text-decoration-thickness);
   --ams-page-header-menu-link-text-underline-offset: var(--ams-links-text-underline-offset);
   --ams-page-header-menu-link-hover-text-decoration-line: var(--ams-links-subtle-hover-text-decoration-line);
   --ams-page-header-navigation-column-gap: var(--ams-space-l);
-  --ams-page-header-navigation-row-gap: var(--ams-space-s);
+  --ams-page-header-navigation-row-gap: var(--ams-space-l);
   --ams-page-heading-color: var(--ams-color-text);
   --ams-page-heading-font-family: var(--ams-typography-font-family);
   --ams-page-heading-font-size: var(--ams-typography-heading-0-font-size);
@@ -880,6 +893,7 @@
   --ams-page-header-brand-name-font-size: var(--ams-typography-heading-3-font-size);
   --ams-page-header-menu-item-color: var(--ams-links-color);
   --ams-page-header-menu-item-hover-color: var(--ams-links-hover-color);
+  --ams-page-with-menu-area-skip-link-margin-inline-end: var(--ams-grid-padding-inline); /** Must be the Grid inline padding, to make sure Skip Link and Grid line up */
   --ams-pagination-link-color: var(--ams-links-color);
   --ams-pagination-link-hover-color: var(--ams-links-hover-color);
   --ams-password-input-background-color: var(--ams-inputs-background-color);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "2.1.0",
+  "version": "3.0.0",
   "author": "Design System Team, City of Amsterdam <designsystem@amsterdam.nl>",
   "description": "All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.",
   "homepage": "https://designsystem.amsterdam",
@@ -25,12 +25,11 @@
   "devDependencies": {
     "change-case": "5.4.4",
     "chokidar-cli": "3.0.0",
-    "npm-run-all": "4.1.5",
     "style-dictionary": "5.1.1"
   },
   "scripts": {
     "clean": "rimraf dist/",
     "build": "node build.js",
-    "watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
+    "build:watch": "chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""
   }
 }

package/src/brand/ams/color.deprecated.tokens.json

@@ -4,7 +4,7 @@
       "interactive": {
         "secondary": {
           "comment": "Use `currentColor` instead",
-          "value": "#181818"
+          "value": "#202020"
         }
       }
     }

package/src/brand/ams/color.tokens.json

@@ -5,12 +5,12 @@
       "feedback": {
         "error": { "value": "#ec0000" },
         "info": { "value": "#009de6" },
-        "success": { "value": "#00a03c" },
+        "success": { "value": "#00893c" },
         "warning": { "value": "#ff9100" }
       },
       "highlight": {
         "azure": { "value": "#009de6" },
-        "green": { "value": "#00a03c" },
+        "green": { "value": "#00893c" },
         "lime": { "value": "#bed200" },
         "magenta": { "value": "#e50082" },
         "orange": { "value": "#ff9100" },
@@ -18,7 +18,7 @@
         "yellow": { "value": "#ffe600" }
       },
       "interactive": {
-        "contrast": { "value": "#181818" },
+        "contrast": { "value": "#202020" },
         "default": { "value": "#004699" },
         "disabled": { "value": "#767676" },
         "hover": { "value": "#003677" },
@@ -30,7 +30,7 @@
       },
       "separator": { "value": "#d1d1d1" },
       "text": {
-        "default": { "value": "#181818" },
+        "default": { "value": "#202020" },
         "inverse": { "value": "#ffffff" },
         "secondary": { "value": "#767676" }
       }

package/src/components/ams/call-to-action-link.tokens.json

@@ -1,7 +1,7 @@
 {
   "ams": {
     "call-to-action-link": {
-      "background-color": { "value": "#00a03c" },
+      "background-color": { "value": "#00893c" },
       "color": { "value": "{ams.color.text.inverse}" },
       "font-family": { "value": "{ams.typography.font-family}" },
       "font-size": { "value": "{ams.typography.body-text.font-size}" },
@@ -13,7 +13,7 @@
       "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
       "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
       "hover": {
-        "background-color": { "value": "#007c2e" },
+        "background-color": { "value": "#10552b" },
         "text-decoration-thickness": {
           "value": "{ams.links.hover.text-decoration-thickness}"
         },

package/src/components/ams/field-set.deprecated.tokens.json

@@ -0,0 +1,9 @@
+{
+  "ams": {
+    "field-set": {
+      "legend": {
+        "margin-block-end": { "value": "{ams.space.s}" }
+      }
+    }
+  }
+}

package/src/components/ams/field-set.tokens.json

@@ -1,6 +1,18 @@
 {
   "ams": {
     "field-set": {
+      "child": {
+        "margin-block-end": { "value": "{ams.space.xs}" },
+        "before-error-message": {
+          "margin-block-end": { "value": "{ams.space.s}" }
+        },
+        "before-field-or-field-set": {
+          "margin-block-end": { "value": "{ams.space.m}" }
+        },
+        "between-fields-and-field-sets": {
+          "margin-block-end": { "value": "{ams.space.l}" }
+        }
+      },
       "invalid": {
         "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
         "padding-inline-start": { "value": "{ams.space.m}" }
@@ -11,8 +23,10 @@
         "font-size": { "value": "{ams.typography.heading.3.font-size}" },
         "font-weight": { "value": "{ams.typography.heading.font-weight}" },
         "line-height": { "value": "{ams.typography.heading.3.line-height}" },
-        "margin-block-end": { "value": "{ams.space.s}" },
-        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
+        "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
+        "in-fieldset": {
+          "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+        }
       }
     }
   }

package/src/components/ams/field.deprecated.tokens.json

@@ -0,0 +1,7 @@
+{
+  "ams": {
+    "field": {
+      "gap": { "value": "{ams.space.s}" }
+    }
+  }
+}

package/src/components/ams/field.tokens.json

@@ -1,7 +1,12 @@
 {
   "ams": {
     "field": {
-      "gap": { "value": "{ams.space.s}" },
+      "child": {
+        "margin-block-end": { "value": "{ams.space.xs}" },
+        "before-error-message": {
+          "margin-block-end": { "value": "{ams.space.s}" }
+        }
+      },
       "invalid": {
         "border-inline-start": { "value": "{ams.border.width.l} solid {ams.color.feedback.error}" },
         "padding-inline-start": { "value": "{ams.space.m}" }

package/src/components/ams/hint.tokens.json

@@ -1,7 +1,10 @@
 {
   "ams": {
     "hint": {
-      "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+      "font-weight": { "value": "{ams.typography.body-text.font-weight}" },
+      "in-fieldset": {
+        "color": { "value": "{ams.color.text.secondary}" }
+      }
     }
   }
 }

package/src/components/ams/label.tokens.json

@@ -6,7 +6,10 @@
       "font-size": { "value": "{ams.typography.heading.3.font-size}" },
       "font-weight": { "value": "{ams.typography.heading.font-weight}" },
       "line-height": { "value": "{ams.typography.heading.3.line-height}" },
-      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
+      "text-wrap": { "value": "{ams.typography.heading.text-wrap}" },
+      "in-fieldset": {
+        "font-weight": { "value": "{ams.typography.body-text.font-weight}" }
+      }
     }
   }
 }

package/src/components/ams/page-header.compact.tokens.json

@@ -4,6 +4,9 @@
       "brand-name": {
         "font-size": { "value": "{ams.typography.heading.2.font-size}" },
         "line-height": { "value": "{ams.typography.heading.2.line-height}" }
+      },
+      "mega-menu": {
+        "padding-block": { "value": "0" }
       }
     }
   }

package/src/components/ams/page-header.tokens.json

@@ -25,6 +25,7 @@
         "text-wrap": { "value": "{ams.typography.heading.text-wrap}" }
       },
       "mega-menu": {
+        "padding-block": { "value": "{ams.space.l}" },
         "button": {
           "cursor": { "value": "{ams.cursor.interactive}" },
           "label": {
@@ -51,6 +52,7 @@
           }
         },
         "link": {
+          "gap": { "value": "{ams.space.xs}" },
           "text-decoration-line": { "value": "{ams.links.subtle.text-decoration-line}" },
           "text-decoration-thickness": { "value": "{ams.links.text-decoration-thickness}" },
           "text-underline-offset": { "value": "{ams.links.text-underline-offset}" },
@@ -61,7 +63,7 @@
       },
       "navigation": {
         "column-gap": { "value": "{ams.space.l}" },
-        "row-gap": { "value": "{ams.space.s}" }
+        "row-gap": { "value": "{ams.space.l}" }
       }
     }
   }

package/src/components/ams/page.tokens.json

@@ -2,7 +2,16 @@
   "ams": {
     "page": {
       "background-color": { "value": "{ams.color.background}" },
-      "max-inline-size": { "value": "90rem" }
+      "max-inline-size": { "value": "90rem" },
+      "with-menu": {
+        "max-inline-size": { "value": "120rem" },
+        "area-skip-link": {
+          "margin-inline-end": {
+            "value": "{ams.grid.padding-inline}",
+            "comment": "Must be the Grid inline padding, to make sure Skip Link and Grid line up"
+          }
+        }
+      }
     }
   }
 }

package/src/components/ams/paragraph.tokens.json

@@ -15,7 +15,8 @@
       },
       "large": {
         "font-size": { "value": "{ams.typography.body-text.large.font-size}" },
-        "line-height": { "value": "{ams.typography.body-text.large.line-height}" }
+        "line-height": { "value": "{ams.typography.body-text.large.line-height}" },
+        "text-wrap": { "value": "balance" }
       }
     }
   }