Changing token names... (lowercase, kebab-case)

[lmormol]

Hi,

I'm wondering if it is possible to change all token names to kebab-case ? 🤔

I mean both CSS and SASS variables, SASS mixins and JS output

[drwpow]

This is intentionally not a feature. The idea is that your token IDs in tokens.json are meaningful, and universal. They appear in your docs; in Figma; in code—everywhere design tokens are used. If they got renamed in different places, they’d be harder to use.

The only exception is plugin-css allows you to rename them for CSS vars because CSS doesn’t handle special characters well (we could probably generate var(--color\.base\.blue) but that seems more hassle than it’s worth). But in general, if you want your token IDs to appear a certain way then the place to make that change is in tokens.json itself—then there’s nothing to configure and there are no surprises.

[lmormol]

I see, thanks for the answer!

I was wondering about having untouched variables names (Collections / Folders / Variable names) in Figma, however in JSON keeping them in kebab-case format.

I assume graphic designer might prefer natural naming convention, but on other levels ( json -> css vars / sass / js ) would be nicer to have it in programming convention.

Will try to request for such a feature the dev of TokensBrucke, figma plugin which is probably the best tool for working together with Cobalt UI at the moment.

BR, L

[drwpow]

Ah I figured it was probably some integration layer like that. Not even just for Cobalt’s sake; when other tools can import tokens.json you’ll want that file to have the IDs in the way you’d like.

I also work on OpenAPI tooling as well, which has the same thing with its YAML or JSON schemas—people try and use different IDs than what’s in their schema, or rename them externally, and then have to deal with lots of bugs because nothing lines up. In DTCG and OpenAPI, the JSON schema is the source of truth, and getting everything perfect there is always the highest payoff.

[drwpow]

As an update, I’ve reversed the decision on this—even though it is best to have your tokens be named predictably, tokens pulled in from all sorts of sources end up being inconsistent.

In the latest version of @terrazzo/plugin-css (Cobalt 2.0 beta) we added a variableName option that gives you full control over this. There are a lot of exciting changes in 2.0 such as the idea that names aren’t centralized anymore, and you can exert more control over how they work per-platform (i.e. per-plugin). A little in-the-weeds but the plugin API docs talk about some of these new concepts