{"_id":"@aram-limpens/design-system-tokens","_rev":"12-18611abfda3ab107740612105f3384d1","name":"@aram-limpens/design-system-tokens","dist-tags":{"latest":"3.0.0"},"versions":{"0.7.1":{"name":"@aram-limpens/design-system-tokens","version":"0.7.1","keywords":["nl-design-system"],"author":{"name":"Community for NL Design System"},"license":"SEE LICENSE IN LICENSE.md","_id":"@aram-limpens/design-system-tokens@0.7.1","maintainers":[{"name":"alimpens","email":"a.limpens@amsterdam.nl"}],"homepage":"https://github.com/Amsterdam/design-system#readme","bugs":{"url":"https://github.com/Amsterdam/design-system/issues"},"dist":{"shasum":"f4632b1de79517b163b022271714622869404698","tarball":"https://registry.npmjs.org/@aram-limpens/design-system-tokens/-/design-system-tokens-0.7.1.tgz","fileCount":63,"integrity":"sha512-Y1ZjZgQSVa9aqwzyzn0Jf+3Du65xNTM+RPxgyD1arEUzzy8su60OGiUMWfZcDv4lyX2zuavBtnHHEeg32GvtUw==","signatures":[{"sig":"MEUCIBqwRkESGN9X+BR9dgSsc9LvGCwqo4+oy1w/E8Kc3oYIAiEA6Ut+eHDysAsGfajo8OMP1HHgg3GZst3rH9Hp6y1qByg=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":69954},"gitHead":"f1a99247ba407d80b8952303fb157912076733b9","private":false,"scripts":{"build":"node build.js","clean":"rimraf dist/","watch":"chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""},"_npmUser":{"name":"alimpens","email":"a.limpens@amsterdam.nl"},"repository":{"url":"git+https://github.com/Amsterdam/design-system.git","type":"git","directory":"proprietary/tokens"},"_npmVersion":"10.1.0","description":"Design tokens for components for the City of Amsterdam based on the NL Design System architecture","directories":{},"_nodeVersion":"20.9.0","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"npm-run-all":"4.1.5","chokidar-cli":"3.0.0","style-dictionary":"3.9.2"},"_npmOperationalInternal":{"tmp":"tmp/design-system-tokens_0.7.1_1712931367517_0.7552321434121152","host":"s3://npm-registry-packages"}},"0.7.2":{"name":"@aram-limpens/design-system-tokens","version":"0.7.2","keywords":["nl-design-system"],"author":{"name":"Community for NL Design System"},"license":"SEE LICENSE IN LICENSE.md","_id":"@aram-limpens/design-system-tokens@0.7.2","maintainers":[{"name":"alimpens","email":"a.limpens@amsterdam.nl"}],"homepage":"https://github.com/Amsterdam/design-system#readme","bugs":{"url":"https://github.com/Amsterdam/design-system/issues"},"dist":{"shasum":"3c747f3e68845e4f778d22ffaa646c7f69dd7eed","tarball":"https://registry.npmjs.org/@aram-limpens/design-system-tokens/-/design-system-tokens-0.7.2.tgz","fileCount":75,"integrity":"sha512-ivLiFpUzUrtSWh4eJ4CXb6UI8+luy8AnObRZpaRgUf5zUip9bwNvb5NjfXZRsNr87GkSgdReLq2NtPl6qZgcEg==","signatures":[{"sig":"MEUCIGZ0fVpd7z4wJOQ77sVWQxlMhkEUnPcr8plYJybWyWfLAiEA9kXlcpcMDESQnvaFYu28nSdWlf3XM1U8PkPtCVOgP/s=","keyid":"SHA256:jl3bwswu80PjjokCgh0o2w5c2U4LhQAE57gj9cz1kzA"}],"unpackedSize":312118},"_from":"file:aram-limpens-design-system-tokens-0.7.2.tgz","private":false,"scripts":{"build":"node build.js","clean":"rimraf dist/","watch":"chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""},"_npmUser":{"name":"alimpens","email":"a.limpens@amsterdam.nl"},"_resolved":"/tmp/c1de8c28fa35201d65e5f9eab4b78c07/aram-limpens-design-system-tokens-0.7.2.tgz","_integrity":"sha512-ivLiFpUzUrtSWh4eJ4CXb6UI8+luy8AnObRZpaRgUf5zUip9bwNvb5NjfXZRsNr87GkSgdReLq2NtPl6qZgcEg==","repository":{"url":"git+https://github.com/Amsterdam/design-system.git","type":"git","directory":"proprietary/tokens"},"_npmVersion":"10.5.0","description":"Design tokens for components for the City of Amsterdam based on the NL Design System architecture","directories":{},"_nodeVersion":"20.12.2","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"npm-run-all":"4.1.5","chokidar-cli":"3.0.0","style-dictionary":"3.9.2"},"_npmOperationalInternal":{"tmp":"tmp/design-system-tokens_0.7.2_1713349861113_0.02970502505859951","host":"s3://npm-registry-packages"}},"2.0.0":{"name":"@aram-limpens/design-system-tokens","version":"2.0.0","keywords":["amsterdam","amsterdam-design-system","design-system","nl-design-system","tokens"],"author":{"name":"Design System Team, City of Amsterdam","email":"designsystem@aram-limpens.nl"},"license":"SEE LICENSE IN LICENSE.md","_id":"@aram-limpens/design-system-tokens@2.0.0","maintainers":[{"name":"alimpens","email":"a.limpens@amsterdam.nl"}],"homepage":"https://designsystem.amsterdam","bugs":{"url":"https://github.com/Amsterdam/design-system/issues"},"dist":{"shasum":"aa8465e940ad87b2f9b7826832122be1fe1a368f","tarball":"https://registry.npmjs.org/@aram-limpens/design-system-tokens/-/design-system-tokens-2.0.0.tgz","fileCount":91,"integrity":"sha512-uvHYUY7mekZytH2UnxIIon+1Ybsb4Pt27KUkqS+RGVP7CNQV7j9WcShQIth0D7wPI547QUMrAp/w8US9PEz3Lw==","signatures":[{"sig":"MEUCIQDxk4kkcOwyuOMKIuAcFyprp0rcpGsl6Wc+Yfi0UaqHMAIgOygPk1FlLuGUSPhhC406CE55ZRBdg68RCJ43d7NBz8U=","keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U"}],"unpackedSize":526898},"type":"module","_from":"file:aram-limpens-design-system-tokens-2.0.0.tgz","private":false,"scripts":{"build":"node build.js","clean":"rimraf dist/","watch":"chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""},"_npmUser":{"name":"alimpens","email":"a.limpens@amsterdam.nl"},"_resolved":"/tmp/43199c053198659c4596b76b9f14c1aa/aram-limpens-design-system-tokens-2.0.0.tgz","_integrity":"sha512-uvHYUY7mekZytH2UnxIIon+1Ybsb4Pt27KUkqS+RGVP7CNQV7j9WcShQIth0D7wPI547QUMrAp/w8US9PEz3Lw==","repository":{"url":"git+https://github.com/Amsterdam/design-system.git","type":"git","directory":"packages-proprietary/tokens"},"_npmVersion":"10.9.2","description":"All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.","directories":{},"_nodeVersion":"22.17.1","publishConfig":{"access":"public"},"_hasShrinkwrap":false,"devDependencies":{"change-case":"5.4.4","npm-run-all":"4.1.5","chokidar-cli":"3.0.0","style-dictionary":"4.4.0"},"_npmOperationalInternal":{"tmp":"tmp/design-system-tokens_2.0.0_1753448820957_0.4783916422147718","host":"s3://npm-registry-packages-npm-production"}},"3.0.0":{"version":"3.0.0","author":{"name":"Design System Team, City of Amsterdam","email":"designsystem@aram-limpens.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","license":"SEE LICENSE IN LICENSE.md","name":"@aram-limpens/design-system-tokens","type":"module","keywords":["amsterdam","amsterdam-design-system","design-system","nl-design-system","tokens"],"private":false,"publishConfig":{"access":"public"},"repository":{"type":"git","url":"git+https://github.com/alimpens/design-system.git","directory":"packages-proprietary/tokens"},"devDependencies":{"change-case":"5.4.4","chokidar-cli":"3.0.0","npm-run-all":"4.1.5","style-dictionary":"4.4.0"},"scripts":{"clean":"rimraf dist/","build":"node build.js","watch":"chokidar --follow-symlinks --initial --command \"npm run build\" \"src/**/*.tokens.json\""},"_id":"@aram-limpens/design-system-tokens@3.0.0","bugs":{"url":"https://github.com/alimpens/design-system/issues"},"_integrity":"sha512-jF9LQGP8fhK/GwbG8M+51O8Y6Ohy4WtW0bhHyAX98uXu7dGYEEhFJRYnfKo6lZKJM9n44cEOBmJeM8jP9VjjTg==","_resolved":"/tmp/425d3b86a90d72d69b52463c47d862cb/aram-limpens-design-system-tokens-3.0.0.tgz","_from":"file:aram-limpens-design-system-tokens-3.0.0.tgz","_nodeVersion":"24.11.0","_npmVersion":"11.6.1","dist":{"integrity":"sha512-jF9LQGP8fhK/GwbG8M+51O8Y6Ohy4WtW0bhHyAX98uXu7dGYEEhFJRYnfKo6lZKJM9n44cEOBmJeM8jP9VjjTg==","shasum":"f27947503688c075f1d1c68d0519184223fde43a","tarball":"https://registry.npmjs.org/@aram-limpens/design-system-tokens/-/design-system-tokens-3.0.0.tgz","fileCount":91,"unpackedSize":527231,"attestations":{"url":"https://registry.npmjs.org/-/npm/v1/attestations/@aram-limpens%2fdesign-system-tokens@3.0.0","provenance":{"predicateType":"https://slsa.dev/provenance/v1"}},"signatures":[{"keyid":"SHA256:DhQ8wR5APBvFHLF/+Tc+AYvPOdTpcIDqOhxsBHRwC7U","sig":"MEYCIQCNq2FkCe0vh8KR1SfhoAILSQXyOP0G1vxQ2n/fQq3PqgIhANczIpvYZ6TgHt2Ptld6SzcxecJf6xxDwzjuZn0BFT1D"}]},"_npmUser":{"name":"GitHub Actions","email":"npm-oidc-no-reply@github.com","trustedPublisher":{"id":"github","oidcConfigId":"oidc:39452452-4cb3-4c11-813a-dbf71f7a76ee"}},"directories":{},"maintainers":[{"name":"alimpens","email":"a.limpens@amsterdam.nl"}],"_npmOperationalInternal":{"host":"s3://npm-registry-packages-npm-production","tmp":"tmp/design-system-tokens_3.0.0_1761925511734_0.6293334914964448"},"_hasShrinkwrap":false}},"time":{"created":"2024-04-12T14:16:07.385Z","modified":"2025-10-31T15:45:12.336Z","0.2.0":"2023-11-17T15:35:46.326Z","0.3.0":"2023-11-17T17:05:14.278Z","0.4.0":"2023-11-17T17:08:45.046Z","0.4.2":"2023-12-13T10:36:45.915Z","0.4.4":"2023-12-13T11:18:44.073Z","0.4.6":"2023-12-13T12:01:13.030Z","0.7.1":"2024-04-12T14:16:07.665Z","0.7.2":"2024-04-17T10:31:01.270Z","2.0.0":"2025-07-25T13:07:01.133Z","3.0.0":"2025-10-31T15:45:11.923Z"},"bugs":{"url":"https://github.com/alimpens/design-system/issues"},"author":{"name":"Design System Team, City of Amsterdam","email":"designsystem@aram-limpens.nl"},"license":"SEE LICENSE IN LICENSE.md","homepage":"https://designsystem.amsterdam","keywords":["amsterdam","amsterdam-design-system","design-system","nl-design-system","tokens"],"repository":{"type":"git","url":"git+https://github.com/alimpens/design-system.git","directory":"packages-proprietary/tokens"},"description":"All design tokens from the Amsterdam Design System. Use it to apply its visual design to your website or application.","maintainers":[{"name":"alimpens","email":"a.limpens@amsterdam.nl"}],"readme":"<!-- @license CC0-1.0 -->\n\n# Amsterdam Design System: Tokens\n\nTEST BREAKING CHANGE VAN TOKENS PACKAGE\n\nThis package provides all design tokens from the [Amsterdam Design System](https://designsystem.amsterdam).\nUse it to apply its visual design to your website or application.\nThe tokens are exported in multiple formats, including CSS custom properties and JSON, making them compatible with most, if not all, technology stacks.\n\n**Note** that the values of the tokens in this package implement the branding of the City of Amsterdam.\nIf your project is not affiliated with the City of Amsterdam, you should not use this package.\nYou are allowed to copy the token files if you change the values to your own branding.\n\n## Introduction\n\nEvery design token is a variable representing a single visual design choice.\nTokens exist for colours, various aspects of text, spacing lengths, border widths, the configuration of animations, and more.\nThe value of every token is valid in CSS.\nAll tokens together form a theme that encodes the entire branding of the City of Amsterdam.\n\n## Installation\n\nInstall this package by itself if you want or need to reference tokens directly in your stylesheets.\n\nNote that our [CSS components](https://www.npmjs.com/package/@aram-limpens/design-system-css) and [React components](https://www.npmjs.com/package/@aram-limpens/design-system-react) provide more functionality and apply the tokens automatically.\nYou should use those packages if your application uses React or if it allows you to apply our HTML classes.\n\n```sh\nnpm install @aram-limpens/design-system-tokens\n```\n\n## Usage in CSS\n\nTokens are typically used as custom properties in CSS.\nTheir names start with a prefix of `--ams-`.\n\n### Main stylesheet\n\nThis package offers a main stylesheet containing all tokens.\nThey are declared as global CSS variables through the `:root` selector.\n\n<!-- prettier-ignore -->\n```ts\nimport \"@aram-limpens/design-system-tokens/dist/index.css\"\n```\n\nIf that doesn’t work for your project, use `index.theme.css` instead, which uses an `.ams-theme` selector.\nAdd that class to a root element of your application.\n\n<!-- prettier-ignore -->\n```ts\nimport \"@aram-limpens/design-system-tokens/dist/index.theme.css\"\n```\n\n```html\n<body class=\"ams-theme\">\n  …\n</body>\n```\n\n### Compact mode\n\nOur branding is rather spacious for websites.\nThe main stylesheet implements this ‘spacious mode’ as the default.\nA compact stylesheet is available for applications that require less white space and smaller text.\n\nNote that the compact stylesheet is not independent – it only contains overrides.\nImport it after the main stylesheet for the correct result.\n\n<!-- prettier-ignore -->\n```ts\nimport \"@aram-limpens/design-system-tokens/dist/index.css\"\nimport \"@aram-limpens/design-system-tokens/dist/compact.css\"\n```\n\n### Three layers\n\nThe tokens are organised in three layers: brand, common and component.\n\n#### Brand tokens\n\nThese express the corporate identity of the City of Amsterdam.\nThey are our fundamental selection from all possible colours, text characteristics, spacing lengths, border widths, etc.\nTheir names begin with our prefix, followed by a design category such as ‘color’, ‘typography’, or ‘space’.\n\nExamples:\n\n```css\n:root {\n  --ams-color-feedback-error: #ec0000;\n  --ams-space-m: 1rem;\n  --ams-aspect-ratio-4-3: 4 / 3;\n  --ams-border-width-l: 0.1875rem;\n}\n```\n\nFind the [list of brand tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/brand/ams) on GitHub.\n\n##### Removing ‘default’ keys\n\nSome brand tokens include a ‘default’ key in JSON to allow for additional variants, such as `ams.color.interactive.default` and `ams.color.interactive.disabled`\nHowever, this key is not needed for collections of variables that are flat, like our CSS custom properties.\nTherefore, we remove this key in non-nested variables.\nFor instance, `--ams-color-interactive` and `--ams-color-interactive-disabled`.\n\n#### Common tokens\n\nRelated components share visual design characteristics.\nFor example, all links have the same colour, and the borders of various form inputs are equally thick.\nCommon tokens express these relations and streamline future changes.\nTheir names begin with our prefix, followed by the name of the group that uses them.\nThis group name is plural to indicate that several components apply these tokens.\n\nDesign system components use common tokens where possible.\nThe same goes for custom components that you may create in your application.\n\n```html\n<a class=\"my-link\" href=\"#\">…</a>\n```\n\n```css\n.my-input {\n  color: var(--ams-links-color);\n  text-underline-offset: var(--ams-links-text-underline-offset);\n}\n```\n\nFind the [list of common tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/common/ams) on GitHub.\n\n#### Component tokens\n\nEvery design system component defines a token for every property that expresses branding and uses it in its stylesheet.\n\nUse these tokens when recreating an existing component to receive the correct values for them – now and in the future.\nDo not apply these tokens to other components – components must be independent.\n\nThe name of a component token ends with the CSS property that uses it, e.g. `-font-size`.\nWe follow [the NL Design System token naming guidelines](https://nldesignsystem.nl/handboek/design-tokens/#naamgeving) here.\n\n```html\n<button class=\"my-button\" type=\"button\">Button label</button>\n```\n\n```css\n.my-button {\n  font-family: var(--ams-button-font-family);\n  background-color: var(--ams-button-primary-background-color);\n}\n```\n\nFind the [list of component tokens](https://github.com/Amsterdam/design-system/tree/main/packages-proprietary/tokens/src/component/ams) on GitHub.\n\n### Overriding tokens\n\nThis package allows the creation of a theme to reuse our components for a different brand.\nThis is a key feature of [NL Design System](https://nldesignsystem.nl/) of which we are part.\n\nHowever, websites and applications for the City of Amsterdam must follow the design system as closely as possible.\nWe repeat: websites and applications for the City of Amsterdam must follow the design system as closely as possible.\n\nAt the same time, we are aware that adopting a design system can pose challenges in practice.\nIf there is a good reason to (temporarily) adapt a component, do so by overriding the values of its appropriate tokens in a separate stylesheet.\nNote that redefining the value of a token is a much better approach than redeclaring styles, adding class names or even inline styles.\n\n## Usage in Sass\n\nThe tokens can be imported as Sass variables as well.\nAs they are already prefixed, the namespace that Sass would assign isn’t necessary.\n\n```sass\n@use \"@aram-limpens/design-system-tokens/dist/index.scss\" as *;\n```\n\nImport the compact tokens if needed.\nNote that Sass doesn't allow importing them alongside the default set due to naming conflicts.\nAddress these tokens through the `compact` namespace and do not use the spacious tokens they replace.\n\n```sass\n@use \"@aram-limpens/design-system-tokens/dist/compact.scss\";\n\n.class {\n  padding-block: compact.$ams-space-m;\n}\n```\n\n## Usage in JavaScript\n\nImport the JSON file to use the tokens in TypeScript or JavaScript.\nHere, tokens start their name with a prefix of `ams.`.\nUse ‘dot notation’ or square brackets to access the tokens.\n\n<!-- prettier-ignore -->\n```tsx\nimport tokens from \"@aram-limpens/design-system-tokens/dist/index.json\"\n\nconst buttonBackgroundColor = tokens.ams.color.interactive.default\nconst rowGap = tokens.ams.space.m\n```\n\nImport and merge the compact tokens if you need them.\nThen you can use the tokens in scripting or css-in-js libraries.\n\n<!-- prettier-ignore -->\n```tsx\nimport compactTokens from \"@aram-limpens/design-system-tokens/dist/compact.json\"\nimport spaciousTokens from \"@aram-limpens/design-system-tokens/dist/index.json\"\n\nconst tokens = { ...spaciousTokens, ...compactTokens }\n```\n\n## Usage in Figma\n\nThe tokens are used in our [Figma Library](https://www.figma.com/file/9IGm6IdPUYizBNGsUnueBd/Amsterdam-Design-System?type=design&node-id=741-19633&mode=design&t=N8P3h3W67O0KNdga-0) as well.\n\n## Updating\n\nWe follow semantic versioning and publish a [change log](https://github.com/Amsterdam/design-system/blob/main/packages-proprietary/tokens/CHANGELOG.md) to guide you through updates.\nThe tokens are a public API of the design system.\nNote that detecting changed or deleted tokens is still a manual process.\n\n## Support\n\nContact us if you have a question, find an issue, or want to contribute.\nFind ways to reach us on [designsystem.amsterdam](https://designsystem.amsterdam/?path=/docs/docs-introduction--docs#send-a-message).\n","readmeFilename":"README.md"}