W3C home > Mailing lists > Public > public-design-tokens-log@w3.org > March 2020

Re: [community-group] [RFC] Format specification (#1)

From: Lucas Arundell via GitHub <sysbot+gh@w3.org>
Date: Sun, 01 Mar 2020 12:18:09 +0000
To: public-design-tokens-log@w3.org
Message-ID: <issue_comment.created-593090683-1583065087-sysbot+gh@w3.org>
Got a new question... I am making some tokens for our type scale at the moment, but hit an interesting point:

```js
const FontSizes = [
  {
    name: 'small',
    value: 12,
    unit: 'px',
    lineHeight: 1.2,
  },
   ...
];
```

I have `lineHeight` in here because it's tightly coupled to the `h1` type scale definition. No other type sizes need this value (although some may share the same value by coincidence). I _also_ have a font size `caption` which is the same font size, but it differs in its letter spacing:

```js
const FontSizes = [
  {
    name: 'small',
    value: 12,
    unit: 'px',
    lineHeight: 1.2,
  },
  {
    name: 'caption',
    value: 12,
    unit: 'px',
    lineHeight: 1.2,
    letterSpacing: "14px" // <-- 
  },
];
```
So obviously this opens up a can of worms in terms of where to draw the line between separating values in different tokens and grouping them. 

For us, our Sketch library currently has all of these text styles set up as Sketch Text Styles -> so the intended ergonomics for the developer are to basically have the same discrete set of text variants:

```jsx
<Text variant="caption">My Groovy Caption</Text>
```

I think that everyone's going to have a different 'where to draw the line' decision point when making their tokens, but also think there could be a clear spec for how to add those extra values. perhaps like the metadata suggestions raised earlier in this issue.

Also thinking that perhaps then `FontSizes` is misleading, instead it should be `FontVariants`

```js
const FontVariants = [
  {
    name: 'caption',
    data: [
        fontSize: {
          value: 12,
          unit: 'px'
        },
        lineHeight: {
          value: 1.2
        },
        letterSpacing: {
          value: 14,
          unit: 'px'
        }
    ]
  },
];
```

I guess the `type` of the `data` fields should be standard enough (`key { value, unit }`), but `FontVariants` as a  token category would prob. not apply to all

-- 
GitHub Notification of comment by lucastobrazil
Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/1#issuecomment-593090683 using your GitHub account
Received on Sunday, 1 March 2020 12:18:11 UTC

This archive was generated by hypermail 2.4.0 : Sunday, 1 March 2020 12:18:12 UTC