Advanced features on Gouache

Here is a short collection of the more advanced feature of the platform and of the SDK.

Published in

Gouache app

3 min readApr 5, 2022

Design tokens stored inside design tokens

With Gouache, it’s possible to store Design Tokens inside a Design Tokens. For instance, you could have a collection of Design tokens (Design tokens folder) that stores raw colors. (for instance blue: #0000ff , red: #ff0000 , black: #000000 , white: #ffffff , and so on.)

You could also have, inside your dark theme folder, a design token named primary color that would store the value of the color blue stored as a design token.

One thing to keep in mind is that, for the moment, you cannot store a design token that stores a design token.

For instance, you could create a design token named buttonColor that would store the primaryColor token that is storing the blue color token that is storing the color #0000ff.

What is the “Referenced in” collapsible?

When you start reusing design tokens and reusable components inside your system, you’ll see appearing a Referenced in X files collapsible at the bottom of your Design tokens folders or at the bottom of your Styles sheets folder.

Referenced in X files | https://gouache.app

This means that you are using these reusable blocks and Design tokens in other components. You can see where they’re being used and you can navigate by clicking on them.

Referenced in links | https://gouache.app

Default style object / production mode

We recommend using the use-gouache hook in production using the defaultStyles object in order to prevent fetching styles. To do so, you need to download the Styles object and use the defaultStyles and the useDefaultStyles params.

Downloading Styles object | https://gouache.app

import defaultStyles from './path_to_downloaded_json_file.json';[...]const { styles, isLoading } = useGouache({ apiKey: 'MY_API_KEY', useDefaultStyles: true, defaultStyles });

URL params override

When you’re using Gouache in production, like said earlier, you should use the defaultStyles object. That said, it did not mean that you cannot use the Gouache platform to test things out. To override the default styles, you can add the following search params to your app URL ?gouache-api-key=MY_GOUACHE_API_KEY . (replacing MY_GOUACHE_API_KEY with your project’s API key). This will only change the styles in your browser and not on any other user.

ex: https://example.com?gouache-api-key=MY_GOUACHE_API_KEY

Reordering styles

For some reason, you might need to re-order the order of your styles in your Styles sheet folder. To do so, it’s very simple. You only have to drag the item where you want it to be and drop it right there.