Clay: Add a Design Tokens section

[drakonux]

What is your proposal?

Lexicon is the experience language, however, the fact is the design system/implementation is Clay. So I suggest adding a page with the variables that are currently in use as other design systems do (e.g. lightning)

At least we could check quickly which are currently in use, which not, which are wrong... and suggest changes.

Clay colors would be a good start to add within the new section (showing hex code, variable name, etc)

Why would adopting this proposal be beneficial?

We are trying to match as much as possible our Figma library with the resources and components Clay provides. So this will help to review if both teams are aligned faster.

What are the alternatives to this proposal?

"Design Tokens" is a trendy name but if you have a better name please be my guest. When I was designing for desktop applications 10 years ago, we called our list of resources a "style dictionary" with variables, not as cool as using "Design Tokens" now.

[matuzalemsteles]

hey @drakonux I would find it a little strange to put "Design Tokens" I would have the idea that we could configure Clay to be used on other platforms, such as Mobile, Desktop and etc... although Clay is fully configurable as CSS I think could generate some confusion with the term "Design Tokens". At least I when I see this term I think I can configure the variables for any platform other than the Web, although it may still make sense to use it here, since it can be used for different use cases in Web... Maybe we just need to clarify that in this new session.

[marcoscv-work]

This could help establish a closer relationship between Lexicon and Clay, and their structure would be better understood.
Clay would still be usable in multiple proposes and devices, If I didn't understand wrong it wouldn't change that fact.

[matuzalemsteles]

Clay would still be usable in multiple proposes and devices, If I didn't understand wrong it wouldn't change that fact.

At least when I look at Design Tokens, I think that the structure that is providing this through a configuration JSON or in this case the Sass variables allow to generate colors, dimensions ... for different platforms, for example for native platforms either mobile or desktop (without HTML and CSS with Electron or React Native for mobile applications). What I mean is that in the case of Lexicon it makes a lot of sense but when it comes into our Clay structure I would be confused, why don't we do that, just CSS settings. I hope I'm being clear.

[marcoscv-work]

I think designers already using our SASS variables to get information and in the past, we have been finding out some inconsistencies, If I don't understand wrong their purpose is improving that part, not to use literally the system of salesforce design tokens, I think salesforce is only an example of a design system which share the variable names and values from the technical side

[matuzalemsteles]

@marcoscv-work yeah, I agree with that, I'm not disagreeing with putting Sass variables, I think maybe we can just clarify in the session our reasons for calling it Design Tokens so as not to cause confusion.

[drakonux]

Marcos is right. I'm a simple person and my proposal too 😊.

My requirement is just to expose all the variables ($dark, $secondary, etc.) on a page in Clayui.com in a way Lexicon can review it faster than now. For now, that's enough.

ps. In short, if "Design Tokens" doesn't fit as a valid name use a more familiar name. For me, it's ok as such as "Clay Colors" or "Clay Variables"

[pat270]

We already have colors at https://clayui.com/docs/css/color.html.

There are a TON of variables. I'm not sure if you really want to see it all or maybe you do? I've been keeping Sass api docs at http://pat270.github.io/lexicon/v2.16.2/content/api/docs/ and variables at https://pat270.github.io/clay-paver-2/2.15.1/.

Just let me know what you want to see and we can add it.

[drakonux]

I didn't know theses things exist and wow, yes! there are a TON of variables 😇. Nice work Patrick. We will study them and see what we find interesting to expose on a page (we will open a new ticket).

For now, I close this suggestion because we didn't know that within the CSS Framework section is "Colors" and more stuff.

In addition, from our point of view: colors, typography, grid, and some important variables should be part of the core of Clay. So it could be better to move those sections within CSS Framework to Foundations.

But as I said it's our point of view. We still have to see how to evolve Lexicon into a design language and Clay its interpretation (design system/web implementation/whatever)

Thanks!