Update dimension format to new W3C object-based structure

[Copilot]

Updates the dimension token format to align with W3C Design Token Community Group proposal https://github.com/design-tokens/community-group/pull/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.