[community-group] Defining "design token" from a "technical" perspective (#42)

lukasoppermann has just created a new issue for https://github.com/design-tokens/community-group:

== Defining "design token" from a "technical" perspective ==
Hey,

I think it would be very important for the standardisation process to define what we within the community group would define as a design token. This has influence on the specs for the format #1 and possibly other specs as well.

It will potentially also influence how tools would export and implement design tokens. I for example, am thinking about this because I am work working on a figma plugin for design tokens.

It may seem clear at first, but I tripped about the following aspects and there are probably more.

### Single value entities
We can probably agree that any single value design property can be a design token.
**Examples:** (using css as an easy to show example)
```css
--color-primary: #40FFBA;
--color-spacer: 16px;
--typescale-xxs: .5rem;
```

### Multi-Value entities
There are properties like shadows or gradients that have more than one value. 
The question is if the combined property is a design token or if only the indivisible aspects are design tokens:

**Examples combined:**
```css
--gradient-success: linear-gradient(90deg, rgba(32,223,26,1) 0%, rgba(95,240,12,1) 54%, rgba(221,255,0,1) 100%);
```
**Examples separated:**
```css
--gradient-success-angle: 90deg;
--gradient-success-stop-1-color: rgba(32,223,26,1);
--gradient-success-stop-1-position: 0%;
--gradient-success-stop-2-color: rgba(95,240,12,1);
--gradient-success-stop-2-position: 54%;
--gradient-success-stop-3-color: rgba(221,255,0,1);
--gradient-success-stop-3-position: 100%;
```

When working as a designer one would normally see the entire gradient or the shadow / elevation as a key aspect. E.g. for this card I used `elevation-small`. I don't know if this may be different for developers.

### Multi-property entities (e.g. styles)
When working for example with text-styles there are different properties like `font-size` and `font-family` that make up a style. I would assume only the individual properties to be design tokens and the combination to be `styles`. Is this something we can agree on?

**Examples design tokens**
```css
--font-family-sans: Roboto;
--font-size-large: 54px;
--font-style-italic: italic;
--line-height-small: 120%;
```

**Examples style (?)**
```css
--display-headline-font-family: var(--font-family-sans);
--display-headline-font-size: var(--font-size-large);
--display-headline-line-height: var(--line-height-small);
```

Please view or discuss this issue at https://github.com/design-tokens/community-group/issues/42 using your GitHub account


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

Received on Tuesday, 29 September 2020 09:22:03 UTC