How do I use design tokens in Custom UI?

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:

  - src
    - index.js
  - static
    - hello-world
      - src

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,

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.