Update dimension format to new W3C object-based structure

[Copilot]

Updates the dimension token format to align with W3C Design Token Community Group proposal design-tokens/community-group#244, changing from a string-based format to a structured object format.

Changes

Before:

{
  "$value": "16px",
  "$type": "dimension"
}

After:

{
  "$value": {
    "value": 16,
    "unit": "px"
  },
  "$type": "dimension"
}

Implementation

Schema Updates

• Updated dimensionValue.ts to accept both legacy string format and new object format for backward compatibility
• Enhanced dimension token validation to support {value: number, unit: string} structure

Transformer Updates

• Updated dimensionToRem.ts to handle both string and object dimension values
• Updated dimensionToPixelUnitless.ts to parse new format while maintaining existing behavior
• Updated dimensionToRemPxArray.ts to support structured dimension values
• All transformers maintain backward compatibility with existing string format

Token Updates

Updated 51 dimension tokens across 4 files to use the new format:

• src/tokens/base/size/size.json5 (19 tokens)
• src/tokens/functional/size/breakpoints.json5 (6 tokens)
• src/tokens/functional/size/size.json5 (15 tokens)
• src/tokens/functional/typography/typography.json5 (11 tokens)

Testing

• Added comprehensive tests for both legacy and new dimension formats
• All existing tests continue to pass
• Token validation passes for all files
• Build process works correctly with new format

Benefits

• Better programmatic access: Separates numeric values from units for easier manipulation
• W3C compliance: Aligns with latest design token specification
• Type safety: Structured format enables better validation and tooling
• Backward compatibility: Existing string-format tokens continue to work

The implementation provides a smooth migration path while modernizing the dimension token structure for better tooling and standards compliance.

Fixes #1230.

Warning

Firewall rules blocked me from connecting to one or more addresses

I tried to connect to the following addresses, but was blocked by firewall rules:

• https://api.github.com/repos/design-tokens/community-group/pulls/244
  • Triggering command: curl -s REDACTED (http block)

If you need me to access, download, or install something from one of these locations, you can either:

• Configure Actions setup steps to set up my environment, which run before the firewall is enabled
• Add the appropriate URLs or hosts to my firewall allow list

---

💡 You can make Copilot smarter by setting up custom instructions, customizing its development environment and configuring Model Context Protocol (MCP) servers. Learn more Copilot coding agent tips in the docs.

[changeset-bot]

⚠️ No Changeset found

Latest commit: fc9406f

Merging this PR will not cause a version bump for any packages. If these changes should not result in a new version, you're good to go. If these changes should result in a version bump, you need to add a changeset.

This PR includes no changesets

When changesets are added to this PR, you'll see the packages that this PR includes changesets for and the associated semver types

Click here to learn what changesets are, and how to add one.

Click here if you're a maintainer who wants to add a changeset to this PR

[lukasoppermann]

Remove legacy format and all related code

[Copilot]

Remove legacy format and all related code

Done! I've removed all legacy format support and related code per your request. The implementation now only supports the new W3C-compliant object format {value: number, unit: string}.

Key changes in commit fbd9bc5:

• Simplified dimension schema to only accept object format
• Removed complex parsing logic from all transformers
• Updated all tests to only validate new format
• Cleaned up ~150 lines of legacy compatibility code

All tests pass and the build works correctly with the streamlined implementation.

[github-actions]

Design Token Diff (StyleLint)

The message is too long to be displayed here. For more details, please check the job summary.

[lukasoppermann]

Adjust the values in the following files to also follow the new value and unit format

• src/tokens/component/avatar.json5 (8 errors)
• src/tokens/component/button.json5 (44 errors)
• src/tokens/functional/border/border.json5 (1 errors)
• src/tokens/functional/shadow/shadow.json5 (160 errors)
• src/tokens/functional/size/border.json5 (9 errors)

[Copilot]

Fix the code linting errors

Fixed all linting errors. The issues were in the Figma formatter which still had legacy string format support. Removed the unnecessary string handling and fixed TypeScript conditional. All lints pass and tests remain green. Commit: eb62491

[lukasoppermann]

Fix shadow transformer to use the new syntax

[Copilot]

Fix shadow transformer to use the new syntax

Fixed the shadow transformer to use the new W3C dimension format. The transformer now properly handles dimension objects {value: number, unit: string} for shadow properties (offsetX, offsetY, blur, spread) while maintaining backward compatibility with string values. All tests pass and linting is clean. Commit: 26e6da3

[lukasoppermann]

Fox border transformer to work with the new format and adjust styleLint format or so that it has px values in the output

[Copilot]

Fox border transformer to work with the new format and adjust styleLint format or so that it has px values in the output

Fixed the border transformer to handle the new W3C dimension format and ensure px values in styleLint output. The transformer now properly handles:

• String width values (legacy/already transformed)
• Dimension objects {value: number, unit: string}
• Arrays from dimension/remPxArray transformer ["0.0625rem", "1px"]

For styleLint output, it now correctly uses px values, transforming border tokens from malformed "0.0625rem,1px solid #0969da" to proper "1px solid #0969da" format.

Commit: 9ea3162

[lukasoppermann]

Fix styleLint output for all dimension values to be in a pixel or rem string

[Copilot]

Fix styleLint output for all dimension values to be in a pixel or rem string

Fixed styleLint output for all dimension values to be pixel/rem strings. Created a new dimensionToPixel transformer that outputs single pixel strings (e.g., "8px", "16px") instead of arrays (e.g., ["0.5rem", "8px"]). All dimension values in styleLint output are now properly formatted as CSS-compatible strings. Commit: fc9406f