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

Hi everyone.

I'm a designer and developer interested in this specification. I'm not representative of any of the companies building design tools but have some experience working with design systems and design tokens, so I'd like to leave here my opinion in case it helps.

I'm agree that CSS should be the basis of this new specification. It's a battle tested language with more than 24 years of evolution and have solved many of the concepts discused here, like colors, sizes, fonts, etc. At the same time, it has a friendly syntax, easy to read by humans and to parse by machines. So I propose create a new format based in CSS, let's say: CTS (Cascade Tokens Sheet). This new format would look similar to CSS:

```css
colors {
    /* This is a comment for the primary color token */
    primary: rgba(233 2 0 0.3);
    secondary: #333;
}

sizes {
    small: 14px;
    normal: 16px;
    medium: 20px;
    big: 40px;
}

typography {
    main {
        font-family: Inter;
        font-size: $sizes.medium;
    }
}

```

The main differences between CTS and CSS is that in CTS there's no selectors, but keywords with the name of the group (colors, sizes, typography) and other groups can be nested (like `typography main`). Note also that in `typography.main.font-size` we are linking the value of `sizes.medium`. We could use a `$` to indicate this (just an idea).

Like in CSS, you can import other CTS that extend or override some values. This allows to create different versions of tokens for different platforms:

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

colors {
    /* We are overriding the primary color */
    primary: #345;
}
```

Other feature that we can use from CSS is media queries, allowing to override values in different platforms:

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

/* Override the font in iOS */
@media iOS {
    typography {
        main {
            font-family: 'SF Pro';
        }
    }
}
```

The advantages of this new format:

- Easy to update by humans (and not only for developers but also designers). Design tools like sketch or figma could even allow to edit the tokens of a file using a simple text editor.
- Flexible: you can insert comments, import others cts, override values etc.
- Does not require to learn anything new. Use the CSS syntax that everybody knows
- Evolve with CSS. New features from CSS can be implemented here: color manipulation, new color spaces (`lab` and `lch`), animations, typographic features, different units (px, cm, mm, rem, deg etc)
- It's scalable, from simple & small design systems to big companies with many different platforms and services.
- Any fixed structure will be obsolete soon, because design systems are changing continually. This new format does not force to follow a specific structure, so it can be adapted to your needs.

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

Received on Thursday, 16 July 2020 10:05:04 UTC