@amsterdam/design-system-tokens 0.16.0 → 1.0.1

package/CHANGELOG.md

@@ -3,6 +3,39 @@
 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)
+
+
+### ⚠ BREAKING CHANGES
+
+* **Checkbox:** Use SVG for icon ([#2039](https://github.com/Amsterdam/design-system/issues/2039))
+* Use border property for borders and box shadows only for hovers ([#1998](https://github.com/Amsterdam/design-system/issues/1998))
+
+### Features
+
+* **Checkbox:** Use SVG for icon ([#2039](https://github.com/Amsterdam/design-system/issues/2039)) ([713ec04](https://github.com/Amsterdam/design-system/commit/713ec04575e9bbcc59aedad1f93e2ea25c2996ed))
+* **Label:** Change design for (optional) hint ([#2048](https://github.com/Amsterdam/design-system/issues/2048)) ([971757c](https://github.com/Amsterdam/design-system/commit/971757c1ba3f5aef401c0f589ea40815907ab7ac))
+* **Page Header:** Use heading level 2 for brandname in compact theme ([#2044](https://github.com/Amsterdam/design-system/issues/2044)) ([c5530df](https://github.com/Amsterdam/design-system/commit/c5530df647c84578aba9b8f258f84cd36d1b81e6))
+* Use border property for borders and box shadows only for hovers ([#1998](https://github.com/Amsterdam/design-system/issues/1998)) ([f91c2e3](https://github.com/Amsterdam/design-system/commit/f91c2e39294c4b1e48f443ccbba5605c5d2dcfa2))
+* Use medium border width for Inputs, Select and Switch thumb ([#2054](https://github.com/Amsterdam/design-system/issues/2054)) ([8cedce5](https://github.com/Amsterdam/design-system/commit/8cedce5728cbfc47df01d000f7a349ad946cee17))
+
+
+### Bug Fixes
+
+* **Date Input, Select, Time Input:** Use correct colors for icons ([#2020](https://github.com/Amsterdam/design-system/issues/2020)) ([a49c3d2](https://github.com/Amsterdam/design-system/commit/a49c3d2b5d4337fab812a274dceff1ce926b34ea))
+
+
+### Miscellaneous Chores
+
+* Release 1.0.0 ([247375d](https://github.com/Amsterdam/design-system/commit/247375df3a0dfd5109726aaf2bb71b56ef62fdd1))
+
 ## [0.16.0](https://github.com/Amsterdam/design-system/compare/design-system-tokens-v0.15.0...design-system-tokens-v0.16.0) (2025-04-25)
 
 

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/compact.css

@@ -16,9 +16,12 @@
   --ams-typography-heading-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
   --ams-typography-heading-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
   --ams-typography-heading-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+  --ams-typography-heading-2-line-height: 1.2133;
   --ams-typography-heading-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
   --ams-typography-heading-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
   --ams-typography-heading-5-font-size: 1rem;
   --ams-typography-heading-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
   --ams-grid-padding-inline: var(--ams-space-xl);
+  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
+  --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
 }

package/dist/compact.d.ts

@@ -46,6 +46,7 @@ declare const tokens: {
         };
         "2": {
           "font-size": DesignToken;
+          "line-height": DesignToken;
         };
         "3": {
           "font-size": DesignToken;
@@ -64,5 +65,11 @@ declare const tokens: {
     grid: {
       "padding-inline": DesignToken;
     };
+    "page-header": {
+      "brand-name": {
+        "font-size": DesignToken;
+        "line-height": DesignToken;
+      };
+    };
   };
 };

package/dist/compact.json

@@ -29,7 +29,8 @@
           "font-size": "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)"
         },
         "2": {
-          "font-size": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)"
+          "font-size": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)",
+          "line-height": "1.2133"
         },
         "3": {
           "font-size": "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)"
@@ -47,6 +48,12 @@
     },
     "grid": {
       "padding-inline": "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)"
+    },
+    "page-header": {
+      "brand-name": {
+        "font-size": "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)",
+        "line-height": "1.2133"
+      }
     }
   }
 }

package/dist/compact.mjs

@@ -21,6 +21,7 @@ export const amsTypographyHeading_1FontSize =
   "clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem)";
 export const amsTypographyHeading_2FontSize =
   "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
+export const amsTypographyHeading_2LineHeight = "1.2133";
 export const amsTypographyHeading_3FontSize =
   "clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem)";
 export const amsTypographyHeading_4FontSize =
@@ -29,3 +30,6 @@ export const amsTypographyHeading_5FontSize = "1rem";
 export const amsTypographyHeading_6FontSize =
   "clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem)";
 export const amsGridPaddingInline = "clamp(1.25rem, 1rem + 1.25vw, 2.25rem)";
+export const amsPageHeaderBrandNameFontSize =
+  "clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem)";
+export const amsPageHeaderBrandNameLineHeight = "1.2133";

package/dist/compact.scss

@@ -14,8 +14,11 @@ $ams-typography-body-text-x-large-font-size: clamp(1.21rem, calc(1.1961rem + 0.0
 $ams-typography-heading-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
 $ams-typography-heading-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
 $ams-typography-heading-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+$ams-typography-heading-2-line-height: 1.2133;
 $ams-typography-heading-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
 $ams-typography-heading-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
 $ams-typography-heading-5-font-size: 1rem;
 $ams-typography-heading-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
 $ams-grid-padding-inline: $ams-space-xl;
+$ams-page-header-brand-name-font-size: $ams-typography-heading-2-font-size;
+$ams-page-header-brand-name-line-height: $ams-typography-heading-2-line-height;

package/dist/compact.theme.css

@@ -16,9 +16,12 @@
   --ams-typography-heading-0-font-size: clamp(1.6105rem, calc(1.5626rem + 0.2394vw), 1.802rem);
   --ams-typography-heading-1-font-size: clamp(1.4641rem, calc(1.4297rem + 0.1721vw), 1.6018rem);
   --ams-typography-heading-2-font-size: clamp(1.331rem, calc(1.3078rem + 0.116vw), 1.4238rem);
+  --ams-typography-heading-2-line-height: 1.2133;
   --ams-typography-heading-3-font-size: clamp(1.21rem, calc(1.1961rem + 0.0695vw), 1.2656rem);
   --ams-typography-heading-4-font-size: clamp(1.1rem, calc(1.0938rem + 0.0313vw), 1.125rem);
   --ams-typography-heading-5-font-size: 1rem;
   --ams-typography-heading-6-font-size: clamp(0.8889rem, calc(0.9141rem + -0.0253vw), 0.9091rem);
   --ams-grid-padding-inline: var(--ams-space-xl);
+  --ams-page-header-brand-name-font-size: var(--ams-typography-heading-2-font-size);
+  --ams-page-header-brand-name-line-height: var(--ams-typography-heading-2-line-height);
 }