How do I use design tokens in Custom UI?

Forge Forge UI Kit and Custom UI
,
1

I have a Custom UI app, and I want to use Design Tokens in it, but can’t figure out how to do it.

My app has the default structure:

app-name
  - src
    - index.js
  - static
    - hello-world
      - src
          App.js

I followed the instructions here. Firstly, I wasn’t sure where to put the line view.theme.enable() - should that be in the top-level index file (app-name/src/index.js) or the module one (app-name/static/hello-world/src/App.js)? I opted for the module one, but I’m not sure whether that was correct.

Anyway, I put that line in and then the instructions said to verify that design tokens are enabled by looking at my HTML. I’m not sure what I’m meant to be looking for - is it the presence of data-theme="dark:dark light:light" data-color-mode="dark" in the <html> tag? And is that the top-level <html>, or the one within the iframe? Neither of my <html> tags has anything resembling that.

Finally, how do I actually use the design tokens to change the appearance of my macro?

For instance, currently I have:

        <div style={{
          border: '2px solid black',
          borderRadius: 15,
        }}>
          ...
        </div>

I can see that the token for border radius is: border.radius.300 - where do I put that? I tried adding it to the styling above by doing borderRadius: border.radius.300 but that threw an error.

I’d appreciate any tips anyone can give.

2

Hey Sharon, I know this is kinda old, but I’m trying to use design tokens in a non react customUI…

Some answers (even if I still have issues):

  • I put the import {view} from ‘@forge/bridge’ and ‘await view.theme.enable’ in the main page, or what would be the App.js in react.
  • You want to look in the iframe for the theme settings in html which should look like this
<html lang="en" data-theme="dark:dark light:light spacing:spacing" data-color-mode="light">

The design tokens need to use the javascript function e.g.

style={{
    borderRadius: token("border.radius.300"),
...
1 Like
3

Thanks! I’ve not looked at this for a while, but if I come back to it I’ll try this!

1 Like