update dimension tokens

[lukasoppermann]

Summary

List of notable changes:

What should reviewers focus on?

Steps to test:

[changeset-bot]

🦋 Changeset detected

Latest commit: dddfe30

The changes in this PR will be included in the next version bump.

This PR includes changesets to release 1 package

Name	Type
@primer/primitives	Patch

Not sure what this means? Click here to learn what changesets are.

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

[Copilot]

Pull request overview

This pull request updates dimension token values from the legacy string format (e.g., "16px") to the W3C Design Tokens Community Group (DTCG) object format (e.g., {value: 16, unit: "px"}). This is a breaking change that removes backward compatibility with the legacy string format.

Changes:

• Updated type definitions to use DimensionTokenValue objects instead of strings for shadow token dimensions
• Modified transformers to handle W3C DTCG object format and removed legacy string format support
• Updated all token JSON files (shadow, button, avatar) to use the new object format
• Enhanced test coverage for the new format including edge cases (zero values, negative values, different units)

Reviewed changes

Copilot reviewed 11 out of 13 changed files in this pull request and generated 1 comment.

Show a summary per file

File	Description
src/types/shadowTokenValue.d.ts	Updated shadow token type to use DimensionTokenValue for offsetX, offsetY, blur, and spread
src/transformers/shadowToCss.ts	Added dimensionToCss helper function to convert W3C dimension objects to CSS strings
src/transformers/shadowToCss.test.ts	Comprehensive test updates covering W3C format including edge cases
src/tokens/functional/shadow/shadow.json5	Converted all shadow token dimensions from string to W3C object format
src/tokens/component/button.json5	Updated button component shadow tokens to W3C format
src/tokens/component/avatar.json5	Updated avatar component shadow tokens to W3C format
src/schemas/typographyTokenSchema.test.ts	Updated tests to validate W3C format and reject legacy strings
src/schemas/shadowTokenSchema.test.ts	Added tests for W3C format validation and legacy format rejection
src/schemas/dimensionValueSchema.test.ts	Removed tests for legacy string format, focused on W3C object validation
src/schemas/dimensionValue.ts	Removed legacy string format support, only accepts W3C object format
src/schemas/dimensionTokenSchema.test.ts	Updated to test W3C format and reject legacy strings
src/schemas/borderTokenSchema.test.ts	Updated border width tests to use W3C format
src/formats/jsonFigma.ts	Added getDimensionValue helper to extract numeric values from W3C objects for Figma export

Comments suppressed due to low confidence (2)

src/formats/jsonFigma.ts:58

• Variables mode, collection, and group are used on lines 52-54 before they are declared on line 58. This will cause a ReferenceError at runtime.

The declaration of these variables should be moved before the floatValue function definition.

  // floatValue
  const floatValue = (property: 'offsetX' | 'offsetY' | 'blur' | 'spread') => ({
    name: `${name}/${property}`,
    value: getDimensionValue(values[property]),
    type: 'FLOAT',
    scopes: ['EFFECT_FLOAT'],
    mode,
    collection,
    group,
  })

  const {attributes} = token
  const {mode, collection, group} = attributes || {}

src/transformers/shadowToCss.ts:46

• Consider using the existing parseDimension utility function from ./utilities/parseDimension.js instead of type casting. This would provide runtime validation and better error messages.

The parseDimension function is already used in other transformers like dimensionToRem, dimensionToPixelUnitless, and dimensionToRemPxArray. Using it here would maintain consistency across the codebase and catch invalid dimension values at runtime.

const dimensionToCss = (dim: DimensionTokenValue): string => {
  if (dim.value === 0) {
    return '0'
  }
  return `${dim.value}${dim.unit}`
}

/**
 * @description converts w3c shadow tokens in css shadow string
 * @type value transformer — [StyleDictionary.ValueTransform](https://github.com/amzn/style-dictionary/blob/main/types/Transform.d.ts)
 * @matcher matches all tokens of $type `shadow`
 * @transformer returns css shadow `string`
 */
export const shadowToCss: Transform = {
  name: 'shadow/css',
  type: 'value',
  transitive: true,
  filter: isShadow,
  transform: (token: TransformedToken, config: PlatformConfig) => {
    // extract value
    const value: ShadowTokenValue | ShadowTokenValue[] = getTokenValue(token)
    const valueProp = token.$value ? '$value' : 'value'
    // turn value into array
    const shadowValues = !Array.isArray(value) ? [value] : value

    return shadowValues
      .map((shadow: ShadowTokenValue) => {
        // if value === string it was probably already transformed
        if (typeof shadow === 'string') return shadow
        checkRequiredTokenProperties(shadow, ['color', 'offsetX', 'offsetY', 'blur', 'spread'])
        /*css box shadow:  inset? | offset-x | offset-y | blur-radius | spread-radius | color */
        return `${shadow.inset === true ? 'inset ' : ''}${dimensionToCss(shadow.offsetX as DimensionTokenValue)} ${dimensionToCss(shadow.offsetY as DimensionTokenValue)} ${dimensionToCss(shadow.blur as DimensionTokenValue)} ${dimensionToCss(shadow.spread as DimensionTokenValue)} ${toHex(alpha(getTokenValue({...token, ...{[valueProp]: shadow}}, 'color'), shadow.alpha || 1, token, config))}`

---

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

[github-actions]

Design Token Diff (CSS)

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

[github-actions]

Design Token Diff (StyleLint)

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