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

Thanks for the valuable comments for this proposal. I'm agree with @mirisuzanne that using CSS as the basis for the new format must be done carefully and we should avoid reusing CSS syntax for things not created for that purpose, in order to prevent future conflicts and confusion from people comming from the CSS world.

But I also think that we don't need to be fully compatible with CSS, because the purpose is different. Just use those aspect that are common, like definitions of colors, gradients, transformations, different units of space, time, radious, and use a similar syntax. But CSS is a language to style html documents, and this new format is to define design values that can be used later not only with real CSS but also other design tools and technologies. I'm closer to the first option proposed by @jonathantneal (maybe the `&` sign for nesting is not necessary here, and I don't understand the difference between the groups with `@define` rules and the typography group).

Let me address some topics that have come up:

### Typings

Typed properties may be useful in some cases to prevent errors. CSS has not syntax for types (although there's a [new javascript API for that](https://developer.mozilla.org/en-US/docs/Web/API/CSS_Typed_OM_API/Guide)), but we can add typing features to the new tokens syntax. I'd avoid using at-rules (like `@colors`) and, instead, prepend the type to the property name. Example:

```css
my-colors {
  Color primary: #456;
  Color secondary: #666;
}
```

This declares the type of the value for each property and if you want to override the values using a different type, it would generate an error:

```css
@import './base.cts';

my-colors {
  primary: red; /* This is a valid color */
  secondary: 23px; /* This is not valid, throws an error */
}
```

We could even allow to assign types to groups, so every child of this group must comply with the group type definition:

```css
Color my-colors {
  primary: red;
  secondary: 23px; /* Not valid */
}
```

### CSS custom properties and variables

I think custom properties (the `--` properties) are a different thing, not equivalent to links used in the tokens (Using `$` in these examples). The main difference is that custom properties are assigned to DOM elements, they are not really variables in the same way that SASS or LESS variables. They are spreaded following the DOM structure, not the CSS structure.

In addition to that, the syntax of css variables is a bit verbose, because technical reasons. It's a new feature of CSS that must be compatible with some legacies (like vendor-prefixes, ie hacks, etc) and must prevent conflicts with future new properties (this is why they start with `--`). The new tokens format has not these constraints and due linking and reusing is a core feature of this new format (to implement systems like Atomic design mentioned by @ManeeshChiba) , it should be the less verbose as possible. Anyway, if you prefer something more aligned with the CSS style, another idea is using the `token()` function (or similiar name) instead de dollar sign:

```css
typography {
    main {
        font-family: Inter;
        font-size: token(sizes.medium);
    }
}
```


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

Received on Friday, 17 July 2020 19:00:32 UTC