Design tokens: getting them to the next level

[roberttran-cc]

Issue motivated by this feedback.

Current situation

Token layers

Actually, we have two layers of tokens:

• choices tokens matching a hard-coded value (for example, --color-red-100: #be242d)
• decisions tokens matching another token (for example, --cc-color-text-primary: var(--color-blue-60))

Usage

They are:

• coded in src/styles/default-theme.css
• used in several components of the Clever Components project (and only in this project for what we know)
• updated in our internal console3 project (and only in this project for what we know)
• documented in our Storybook

Issues & proposals

The current implementation could be more detailed and could offer more granularity.

On details

We lack a notion of scope for our tokens: examples would be global tokens & component-level tokens.

There's also the notion of type (is it a hard-coded value or an alias) but I think it is less relevant.

Source: https://spectrum.adobe.com/page/design-tokens/

On granularity

A few decisions tokens are defined with hard-coded value: we should consider an underlying set of choice tokens to avoid this case.

/** before **/
--cc-margin-top-btn-horizontal-form: 1.6em;

/** after **/
--cc-spacing-xs: 0.4em;
--cc-spacing-s: 0.8em;
--cc-spacing-m: 1.6em;
--cc-spacing-l: 2.4em;
--cc-spacing-xl: 3.2em;

--cc-margin-top-btn-horizontal-form: var(--cc-spacing-m);

Related to #890, whenever possible, we should consider creating a token that would sit in an intermediate layer between global & component-level layers (kudos to @florian-sanders-cc for pointing that out, I totally agree).

/** before **/
/* in the components */
color: var(--cc-input-label-color, inherit); /* cc-input-text */
color: var(--cc-toggle-legend-color, inherit); /* cc-toggle */

/* in the project */
:root {
  --cc-input-label-color: red;
  --cc-toggle-legend-color: red;
}

/* after */
/* in the components */
color: var(--cc-form-label-color, var(--cc-input-label-color, inherit)); /* cc-input-text */
color: var(--cc-form-label-color, var(--cc-toggle-legend-color, inherit)); /* cc-toggle */

/* in the project */
:root {
  --cc-form-label-color: red;
}

What's expected

Discuss those topics & set a course of action!

PS: this issue could include how to improve the Storybook page.

[Galimede]

Nice, thanks for the issue @roberttran-cc! :muscle:

I'll add something to the topic: currently we don't have a proper way to handle and select shades of colors. E.g: let's say we had a 80 grey color shade (--color-grey-80) and that we want to add another one, that would corresponds to 90 (--color-grey-80). Currently, we'll chose the color purely arbitrarily.

Within that being said, I think it's also something that we'll need to discuss on this topic.