feat(Dialog): Add design tokens for border radius and box shadow

[VincentSmedinga]

Describe the pull request

Thank you for contributing to the project!
Please use this template to help us handle your PR smoothly.

What

1. This adds design tokens for border-radius and box-shadow to our Dialog component.
2. It extracts new and existing functions in our build script to separate files.

Why

1. The NL Design System core team asked us to. We don’t use these properties ourselves because their visual appearance doesn’t match our branding. But the community can reuse our components for their websites and their branding may require being able to set them.
2. The script became unwieldy after adding yet another transform, filter and function. I extracted these functions to separate files and added documentation, but didn’t change their behaviour. I considered adding unit tests, but the functions are rather simple and/or implement the proven API of Style Dictionary.

How

• An early discovery was that Style Dictionary doesn’t use the dimension type (an object with value and unit properties) that the DTCG specification requires for the values of the CSS box-shadow property. So the first step was to add a transformer (shadowDTCGDimensionNormalize) so that we can keep following the specfication for our token definitions. It uses a simple dimensionToString function that I could later on reuse in our existing dtcgDimension transform.
• I used new files for these, see above, and decided to move existing functions and transforms as well.
• I added "$type": "shadow" to our existing tokens for box-shadow, and specified the subtokens for our inputs and button tokens.
• I followed a couple of AI-generated suggestions to improve our build script.
• Then I added the requested tokens to our Dialog component.
• As we decided earlier that we don’t want these values to appear in our own tokens stylesheet, I added a filter and $extension properties to exclude them.
• Then I concluded that we can’t also omit the related CSS declarations from our component stylesheets, as that would mean the tokens of our consumers wouldn’t be applied. I had to use a fallback of initial to their var() custom property calls, or else our value-no-unknown-custom-properties rule of Stylelint would object against an unexpected custom property. So we won’t be able to shave off these lines of CSS. As we’ll probably add more tokens we don’t use ourselves in the future, to support the community, the approach will still save some weight in the tokens stylesheet.

Checklist

Before submitting your pull request, please ensure you have done the following. Check each checkmark if you have done so or if it wasn't necessary:

• Add or update unit tests
• Add or update documentation
• Add or update stories
• Add or update exports in index.* files
• Start the PR title with a Conventional Commit prefix, as explained here.

Additional notes

• Should we convert everything to TypeScript?

[Copilot]

Pull request overview

This PR adds community-facing design token support for border-radius and box-shadow in the Dialog component, and refactors the Style Dictionary build pipeline to better support DTCG-compliant shadow/dimension token shapes while excluding Amsterdam-unwanted tokens from published outputs.

Changes:

• Add --ams-dialog-border-radius and --ams-dialog-box-shadow hooks in Dialog CSS (with initial fallback).
• Introduce DTCG shadow/dimension normalization utilities and update multiple component tokens to declare "$type": "shadow" for box-shadow.
• Refactor the tokens build script by extracting transforms/filters into separate modules and applying an exclusion filter across outputs.

Reviewed changes

Copilot reviewed 17 out of 17 changed files in this pull request and generated 3 comments.

Show a summary per file

File	Description
packages/css/src/components/dialog/dialog.scss	Adds border-radius/box-shadow declarations using token custom properties with initial fallback.
packages-proprietary/tokens/style-dictionary/transforms/shadow-dtcg-dimension-normalize.js	Adds a transform to convert shadow sub-value dimension objects to CSS strings prior to shadow/css/shorthand.
packages-proprietary/tokens/style-dictionary/transforms/name-custom-kebab.js	Extracts custom kebab-case naming transform (strips trailing default).
packages-proprietary/tokens/style-dictionary/transforms/name-custom-camel.js	Extracts custom camelCase naming transform (strips trailing default).
packages-proprietary/tokens/style-dictionary/transforms/dtcg-dimension.js	Extracts DTCG dimension-to-string value transform using shared helper.
packages-proprietary/tokens/style-dictionary/filters/ams-exclude.js	Adds filter to exclude tokens marked via $extensions.nl.amsterdam.exclude.
packages-proprietary/tokens/style-dictionary/dimensionToString.js	Adds shared helper to stringify DTCG dimension objects.
packages-proprietary/tokens/src/components/ams/text-area.tokens.json	Marks box-shadow tokens as "$type": "shadow" for proper shadow handling.
packages-proprietary/tokens/src/components/ams/tabs.tokens.json	Converts tab shadows to structured DTCG shadow objects (notably includes calc() offsets).
packages-proprietary/tokens/src/components/ams/search-field.tokens.json	Marks box-shadow tokens as "$type": "shadow".
packages-proprietary/tokens/src/components/ams/password-input.tokens.json	Marks box-shadow tokens as "$type": "shadow".
packages-proprietary/tokens/src/components/ams/dialog.tokens.json	Adds border-radius and box-shadow tokens (excluded from Amsterdam output).
packages-proprietary/tokens/src/components/ams/date-input.tokens.json	Marks box-shadow tokens as "$type": "shadow".
packages-proprietary/tokens/src/components/ams/button.tokens.json	Converts button hover box-shadow to structured DTCG shadow object.
packages-proprietary/tokens/src/common/ams/inputs.tokens.json	Converts shared input hover/invalid hover box-shadow to structured DTCG shadow objects.
packages-proprietary/tokens/build.js	Registers extracted transforms/filters, applies exclusion filter to outputs, and adds common transform chain including shadow normalization/shorthand.
packages-proprietary/tokens/README.md	Documents the new $extensions.nl.amsterdam.exclude mechanism and CSS fallback pattern.

---

💡 Add Copilot custom instructions for smarter, more guided reviews. Learn how to get started.

[VincentSmedinga]

Closing this to separate concerns into dedicated PRs.