[community-group] Merged Pull Request: Proposal: changes to type: $dimension and type: $duration tokens

drwpow has just merged drwpow's pull request 244 for https://github.com/design-tokens/community-group:

== Proposal: changes to type: $dimension and type: $duration tokens ==
## Summary

This proposes the following changes to `$type: dimension` and `$type: duration` tokens, which have the same designs:

- Changes `$value` from a string → object with `value` and `unit` keys for both dimension and duration

## Reasoning

This PR proposes that the following discussions be resolved like so:

- #121: ✅ **Accepted** (as written)
- #218: ❌ **Rejected** (that moves in the opposite direction, turning dimension/durations into number-only values)

## Pros

- Simplifies tooling because these token types would no longer need string parsing (which could potentially introduce bugs)
  - Other types like shadows and borders already split their values into an object with keys
- Reduces errors in output.
  - For example, if someone was exporting dimension tokens to `.js`, they could normalize everything to `px` and just output numbers (which is the default behavior of JS styling). Tooling wouldn’t have to try and parse the string from the number, potentially introducing bugs.
- Simplifies validation because string pattern matching is no longer required
  - Validation is now as simple as checking for the object wrapper, both keys, and both keys match their expected primitive types.

## Cons

- Objects are more verbose to type

## Alternatives 

- We could be more lax about `$value.unit` for dimensions, however, that seems to introduce more problems and regress that part of the schema ([see comment below](https://github.com/design-tokens/community-group/pull/244#issuecomment-2294724417))
- We could accept #218, and downconvert all dimensions into `px` values and durations into `ms`. But this would break many setups in tokens (chiefly, web—`rem`s and `px` are distinct values with different uses, and based on implementation, aren’t always mathematically-equivalent).
  - We could also split the difference, and keep the object for dimensions, and just number for duration (standardizing on milliseconds only). That’s just “syntactic sugar” anyway.

## Notes

- The original proposal had `$value.number` instead of `$value.value`, possibly to reduce duplication but I didn’t find a rationale. This changes to `value` because that’s a more common nomenclature for this term, e.g. `csstree`: 

  <img width="300" src="https://github.com/user-attachments/assets/782d9438-fbc1-4a01-9922-df15bda5d871" alt="screenshot of csstree showing a “value” / “unit” object">

(PR description edited from original version to reflect changes in code)

See https://github.com/design-tokens/community-group/pull/244


-- 
Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config

Received on Thursday, 24 October 2024 19:22:49 UTC