@amsterdam/design-system-tokens 1.0.0 → 1.0.1

package/CHANGELOG.md

@@ -3,6 +3,13 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [1.0.1](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v1.0.0...design-system-tokens-v1.0.1) (2025-06-06)
+
+
+### Bug Fixes
+
+* **Button:** Restore missing border for secondary button ([#2087](https://github.com/Amsterdam/design-system/issues/2087)) ([18b7a70](https://github.com/Amsterdam/design-system/commit/18b7a70bebe368bba83ce492862ffca70cff11a0))
+
 ## [1.0.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.16.0...design-system-tokens-v1.0.0) (2025-05-28)
 
 

package/README.md

@@ -27,7 +27,7 @@ npm install @amsterdam/design-system-tokens
 ## Usage in CSS
 
 Tokens are typically used as custom properties in CSS.
-Their name starts with a prefix of `--ams-`; that of a component token (see below) with the property that uses it, e.g. `-font-size`.
+Their names start with a prefix of `--ams-`.
 
 ### Main stylesheet
 
@@ -76,13 +76,15 @@ The tokens are organised in three layers: brand, common and component.
 
 These express the corporate identity of the City of Amsterdam.
 They are our fundamental selection from all possible colours, text characteristics, spacing lengths, border widths, etc.
+Their names begin with our prefix, followed by a design category such as ‘color’, ‘typography’, or ‘space’.
+
 Examples:
 
 ```css
 :root {
   --ams-color-feedback-error: #ec0000;
   --ams-space-m: 1rem;
-  --ams-aspect-ratio-wide: 4/3;
+  --ams-aspect-ratio-4-3: 4 / 3;
   --ams-border-width-l: 0.1875rem;
 }
 ```
@@ -101,6 +103,8 @@ For instance, `--ams-color-interactive` and `--ams-color-interactive-disabled`.
 Related components share visual design characteristics.
 For example, all links have the same colour, and the borders of various form inputs are equally thick.
 Common tokens express these relations and streamline future changes.
+Their names begin with our prefix, followed by the name of the group that uses them.
+This group name is plural to indicate that several components apply these tokens.
 
 Design system components use common tokens where possible.
 The same goes for custom components that you may create in your application.
@@ -125,6 +129,9 @@ Every design system component defines a token for every property that expresses
 Use these tokens when recreating an existing component to receive the correct values for them – now and in the future.
 Do not apply these tokens to other components – components must be independent.
 
+The name of a component token ends with the CSS property that uses it, e.g. `-font-size`.
+We follow [the NL Design System token naming guidelines](https://nldesignsystem.nl/handboek/design-tokens/#naamgeving) here.
+
 ```html
 <button class="my-button" type="button">Button label</button>
 ```
@@ -181,7 +188,7 @@ Use ‘dot notation’ or square brackets to access the tokens.
 ```tsx
 import tokens from "@amsterdam/design-system-tokens/dist/index.json"
 
-const buttonBackgroundColor = tokens.ams.color["primary-blue"]
+const buttonBackgroundColor = tokens.ams.color.interactive.default
 const rowGap = tokens.ams.space.m
 ```
 

package/dist/index.css

@@ -83,6 +83,7 @@
   --ams-breadcrumb-separator-block-size: 1ex;
   --ams-breadcrumb-separator-inline-size: 1ex;
   --ams-button-border-style: solid;
+  --ams-button-secondary-border-color: currentColor;
   --ams-button-tertiary-background-color: transparent;
   --ams-button-tertiary-border-color: transparent;
   --ams-button-tertiary-hover-border-color: currentColor;
@@ -275,6 +276,8 @@
   --ams-button-padding-block: var(--ams-space-s);
   --ams-button-padding-inline: var(--ams-space-m);
   --ams-button-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-button-icon-only-padding-block: var(--ams-space-s);
+  --ams-button-icon-only-padding-inline: var(--ams-space-s);
   --ams-button-primary-background-color: var(--ams-color-interactive);
   --ams-button-primary-border-color: var(--ams-color-interactive);
   --ams-button-primary-color: var(--ams-color-text-inverse);
@@ -284,14 +287,13 @@
   --ams-button-primary-hover-border-color: var(--ams-color-interactive-hover);
   --ams-button-secondary-background-color: var(--ams-color-background);
   --ams-button-secondary-color: var(--ams-color-interactive);
+  --ams-button-secondary-disabled-border-color: var(--ams-color-interactive-disabled);
+  --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
   --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
-  --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-tertiary-color: var(--ams-color-interactive);
-  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
-  --ams-button-icon-only-padding-block: var(--ams-space-s);
-  --ams-button-icon-only-padding-inline: var(--ams-space-s);
+  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
   --ams-card-heading-margin-block-end: var(--ams-space-xs);
   --ams-card-heading-group-gap: var(--ams-space-xs);
   --ams-card-heading-group-margin-block-end: var(--ams-space-xs);

package/dist/index.d.ts

@@ -359,6 +359,10 @@ declare const tokens: {
       disabled: {
         cursor: DesignToken;
       };
+      "icon-only": {
+        "padding-block": DesignToken;
+        "padding-inline": DesignToken;
+      };
       primary: {
         "background-color": DesignToken;
         "border-color": DesignToken;
@@ -374,12 +378,14 @@ declare const tokens: {
       };
       secondary: {
         "background-color": DesignToken;
+        "border-color": DesignToken;
         color: DesignToken;
-        hover: {
-          "box-shadow": DesignToken;
+        disabled: {
+          "border-color": DesignToken;
           color: DesignToken;
         };
-        disabled: {
+        hover: {
+          "box-shadow": DesignToken;
           color: DesignToken;
         };
       };
@@ -387,18 +393,14 @@ declare const tokens: {
         "background-color": DesignToken;
         "border-color": DesignToken;
         color: DesignToken;
-        hover: {
-          "border-color": DesignToken;
+        disabled: {
           color: DesignToken;
         };
-        disabled: {
+        hover: {
+          "border-color": DesignToken;
           color: DesignToken;
         };
       };
-      "icon-only": {
-        "padding-block": DesignToken;
-        "padding-inline": DesignToken;
-      };
     };
     card: {
       heading: {

package/dist/index.json

@@ -343,6 +343,10 @@
       "disabled": {
         "cursor": "not-allowed"
       },
+      "icon-only": {
+        "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
+        "padding-inline": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)"
+      },
       "primary": {
         "background-color": "#004699",
         "border-color": "#004699",
@@ -358,30 +362,28 @@
       },
       "secondary": {
         "background-color": "#ffffff",
+        "border-color": "currentColor",
         "color": "#004699",
+        "disabled": {
+          "border-color": "#767676",
+          "color": "#767676"
+        },
         "hover": {
           "box-shadow": "inset 0 0 0 0.0625rem",
           "color": "#003677"
-        },
-        "disabled": {
-          "color": "#767676"
         }
       },
       "tertiary": {
         "background-color": "transparent",
         "border-color": "transparent",
         "color": "#004699",
+        "disabled": {
+          "color": "#767676"
+        },
         "hover": {
           "border-color": "currentColor",
           "color": "#003677"
-        },
-        "disabled": {
-          "color": "#767676"
         }
-      },
-      "icon-only": {
-        "padding-block": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)",
-        "padding-inline": "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)"
       }
     },
     "card": {

package/dist/index.mjs

@@ -235,6 +235,10 @@ export const amsButtonPaddingBlock =
 export const amsButtonPaddingInline =
   "clamp(1.125rem, 1.0313rem + 0.4688vw, 1.5rem)";
 export const amsButtonDisabledCursor = "not-allowed";
+export const amsButtonIconOnlyPaddingBlock =
+  "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
+export const amsButtonIconOnlyPaddingInline =
+  "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
 export const amsButtonPrimaryBackgroundColor = "#004699";
 export const amsButtonPrimaryBorderColor = "#004699";
 export const amsButtonPrimaryColor = "#ffffff";
@@ -243,20 +247,18 @@ export const amsButtonPrimaryDisabledBorderColor = "#767676";
 export const amsButtonPrimaryHoverBackgroundColor = "#003677";
 export const amsButtonPrimaryHoverBorderColor = "#003677";
 export const amsButtonSecondaryBackgroundColor = "#ffffff";
+export const amsButtonSecondaryBorderColor = "currentColor";
 export const amsButtonSecondaryColor = "#004699";
+export const amsButtonSecondaryDisabledBorderColor = "#767676";
+export const amsButtonSecondaryDisabledColor = "#767676";
 export const amsButtonSecondaryHoverBoxShadow = "inset 0 0 0 0.0625rem";
 export const amsButtonSecondaryHoverColor = "#003677";
-export const amsButtonSecondaryDisabledColor = "#767676";
 export const amsButtonTertiaryBackgroundColor = "transparent";
 export const amsButtonTertiaryBorderColor = "transparent";
 export const amsButtonTertiaryColor = "#004699";
+export const amsButtonTertiaryDisabledColor = "#767676";
 export const amsButtonTertiaryHoverBorderColor = "currentColor";
 export const amsButtonTertiaryHoverColor = "#003677";
-export const amsButtonTertiaryDisabledColor = "#767676";
-export const amsButtonIconOnlyPaddingBlock =
-  "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
-export const amsButtonIconOnlyPaddingInline =
-  "clamp(0.5625rem, 0.5156rem + 0.2344vw, 0.75rem)";
 export const amsCardHeadingMarginBlockEnd =
   "clamp(0.2813rem, 0.2578rem + 0.1172vw, 0.375rem)";
 export const amsCardHeadingGroupGap =

package/dist/index.scss

@@ -81,6 +81,7 @@ $ams-breadcrumb-separator-background-image: url("data:image/svg+xml;utf8,<svg xm
 $ams-breadcrumb-separator-block-size: 1ex;
 $ams-breadcrumb-separator-inline-size: 1ex;
 $ams-button-border-style: solid;
+$ams-button-secondary-border-color: currentColor;
 $ams-button-tertiary-background-color: transparent;
 $ams-button-tertiary-border-color: transparent;
 $ams-button-tertiary-hover-border-color: currentColor;
@@ -273,6 +274,8 @@ $ams-button-outline-offset: $ams-focus-outline-offset;
 $ams-button-padding-block: $ams-space-s;
 $ams-button-padding-inline: $ams-space-m;
 $ams-button-disabled-cursor: $ams-cursor-disabled;
+$ams-button-icon-only-padding-block: $ams-space-s;
+$ams-button-icon-only-padding-inline: $ams-space-s;
 $ams-button-primary-background-color: $ams-color-interactive;
 $ams-button-primary-border-color: $ams-color-interactive;
 $ams-button-primary-color: $ams-color-text-inverse;
@@ -282,14 +285,13 @@ $ams-button-primary-hover-background-color: $ams-color-interactive-hover;
 $ams-button-primary-hover-border-color: $ams-color-interactive-hover;
 $ams-button-secondary-background-color: $ams-color-background;
 $ams-button-secondary-color: $ams-color-interactive;
+$ams-button-secondary-disabled-border-color: $ams-color-interactive-disabled;
+$ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
 $ams-button-secondary-hover-box-shadow: inset 0 0 0 $ams-border-width-s;
 $ams-button-secondary-hover-color: $ams-color-interactive-hover;
-$ams-button-secondary-disabled-color: $ams-color-interactive-disabled;
 $ams-button-tertiary-color: $ams-color-interactive;
-$ams-button-tertiary-hover-color: $ams-color-interactive-hover;
 $ams-button-tertiary-disabled-color: $ams-color-interactive-disabled;
-$ams-button-icon-only-padding-block: $ams-space-s;
-$ams-button-icon-only-padding-inline: $ams-space-s;
+$ams-button-tertiary-hover-color: $ams-color-interactive-hover;
 $ams-card-heading-margin-block-end: $ams-space-xs;
 $ams-card-heading-group-gap: $ams-space-xs;
 $ams-card-heading-group-margin-block-end: $ams-space-xs;

package/dist/index.theme.css

@@ -83,6 +83,7 @@
   --ams-breadcrumb-separator-block-size: 1ex;
   --ams-breadcrumb-separator-inline-size: 1ex;
   --ams-button-border-style: solid;
+  --ams-button-secondary-border-color: currentColor;
   --ams-button-tertiary-background-color: transparent;
   --ams-button-tertiary-border-color: transparent;
   --ams-button-tertiary-hover-border-color: currentColor;
@@ -275,6 +276,8 @@
   --ams-button-padding-block: var(--ams-space-s);
   --ams-button-padding-inline: var(--ams-space-m);
   --ams-button-disabled-cursor: var(--ams-cursor-disabled);
+  --ams-button-icon-only-padding-block: var(--ams-space-s);
+  --ams-button-icon-only-padding-inline: var(--ams-space-s);
   --ams-button-primary-background-color: var(--ams-color-interactive);
   --ams-button-primary-border-color: var(--ams-color-interactive);
   --ams-button-primary-color: var(--ams-color-text-inverse);
@@ -284,14 +287,13 @@
   --ams-button-primary-hover-border-color: var(--ams-color-interactive-hover);
   --ams-button-secondary-background-color: var(--ams-color-background);
   --ams-button-secondary-color: var(--ams-color-interactive);
+  --ams-button-secondary-disabled-border-color: var(--ams-color-interactive-disabled);
+  --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-secondary-hover-box-shadow: inset 0 0 0 var(--ams-border-width-s);
   --ams-button-secondary-hover-color: var(--ams-color-interactive-hover);
-  --ams-button-secondary-disabled-color: var(--ams-color-interactive-disabled);
   --ams-button-tertiary-color: var(--ams-color-interactive);
-  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
   --ams-button-tertiary-disabled-color: var(--ams-color-interactive-disabled);
-  --ams-button-icon-only-padding-block: var(--ams-space-s);
-  --ams-button-icon-only-padding-inline: var(--ams-space-s);
+  --ams-button-tertiary-hover-color: var(--ams-color-interactive-hover);
   --ams-card-heading-margin-block-end: var(--ams-space-xs);
   --ams-card-heading-group-gap: var(--ams-space-xs);
   --ams-card-heading-group-margin-block-end: var(--ams-space-xs);

package/package.json

@@ -1,5 +1,5 @@
 {
-  "version": "1.0.0",
+  "version": "1.0.1",
   "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",

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

@@ -15,6 +15,10 @@
       "disabled": {
         "cursor": { "value": "{ams.cursor.disabled}" }
       },
+      "icon-only": {
+        "padding-block": { "value": "{ams.space.s}" },
+        "padding-inline": { "value": "{ams.space.s}" }
+      },
       "primary": {
         "background-color": { "value": "{ams.color.interactive.default}" },
         "border-color": { "value": "{ams.color.interactive.default}" },
@@ -30,30 +34,28 @@
       },
       "secondary": {
         "background-color": { "value": "{ams.color.background}" },
+        "border-color": { "value": "currentColor" },
         "color": { "value": "{ams.color.interactive.default}" },
+        "disabled": {
+          "border-color": { "value": "{ams.color.interactive.disabled}" },
+          "color": { "value": "{ams.color.interactive.disabled}" }
+        },
         "hover": {
           "box-shadow": { "value": "inset 0 0 0 {ams.border.width.s}" },
           "color": { "value": "{ams.color.interactive.hover}" }
-        },
-        "disabled": {
-          "color": { "value": "{ams.color.interactive.disabled}" }
         }
       },
       "tertiary": {
         "background-color": { "value": "transparent" },
         "border-color": { "value": "transparent" },
         "color": { "value": "{ams.color.interactive.default}" },
+        "disabled": {
+          "color": { "value": "{ams.color.interactive.disabled}" }
+        },
         "hover": {
           "border-color": { "value": "currentColor" },
           "color": { "value": "{ams.color.interactive.hover}" }
-        },
-        "disabled": {
-          "color": { "value": "{ams.color.interactive.disabled}" }
         }
-      },
-      "icon-only": {
-        "padding-block": { "value": "{ams.space.s}" },
-        "padding-inline": { "value": "{ams.space.s}" }
       }
     }
   }