Re: [community-group] Implicit vs. explicit typing in composite tokens (#199)

> What if you want to describe line height in typography as `"10px"` and as `1.2`. Currently those are two different types, a `dimension` and a `number`.

In this case, I'd say that the issue is not with the syntax itself, but with the incomplete definition of the `typography` type.  If composite token props are meant to have values that correspond to a non-composite type (e.g., number, color, dimension, etc.), then we need to make sure that non-composite types are defined in order to support their use within _composite_ tokens.


> The specification doesn't explain in any way or form how to disambiguate a composite token where a field can have one of multiple possible types. This is very limiting.

Technically, we already have this ambiguous definition with the "fontFamily" and "fontWeight" properties. A fontFamily token may be either a string or an array of strings. A fontWeight token may be either an enumerated string value (e.g., "thin", "regular", "bold", etc.) or a number (e.g., 100, 400, 700).  However, if you really want to get technical, _ANY_ token value (or composite property value) can also be an alias string, so even if a type is defined as a `number`, tooling technically needs to support a `number` OR a `string` (alias).

In the case of the typography "lineHeight" property, I'd propose defining a new "lineHeight" type such that it may be either a `number` (i.e., a multiplier) or an explicit `dimension`.  Then, typography "lineHeight" would require its value to be a `lineHeight` token or alias (instead of the ambiguous type that's currently documented).

```ts
aliasString = string; // e.g., "{foo.bar.fizz.buzz}"
dimension = string | aliasString; // format: "N(px|rem)"
fontWeight = number | string | aliasString;
fontFamily = string | string[] | aliasString;
lineHeight = number | dimension | aliasString;
typography = {
  "fontFamily" fontFamily;
  "fontSize" dimension;
  "fontWeight" fontWeight;
  "letterSpacing" dimension;
  "lineHeight" lineHeight;
} | aliasString;
```


-- 
GitHub Notification of comment by CITguy
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/199#issuecomment-1374579053 using your GitHub account


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

Received on Saturday, 7 January 2023 19:11:32 UTC