Typography UI tokens and CSS variables are not loading in Jira at all

I’m writing a CustomUI app and was trying to use the typography tokens (css vars) working. To check they were coming in I just used the var with a silly fallback. It wasn’t working so went digging.

When I looked at my UI Kit app I noticed they weren’t working in there but looked ok, it was using the token fallback.

Then I looked at the native Jira UI and it too is using the fallbacks, e.g:

I manually loaded the definitions in my app, and what is worse is that the fallbacks don’t match the definitions from @atlaskit/tokens/dist/es2019/artifacts/themes/atlassian-typography-adg3.js

Looks like this broke and nobody has noticed?? Or have I got something wrong?

Hey @PeterMcNeil2,

I just attempted to replicate this, but I’m not seeing an issue in my Jira instance - that said Jira has lots of views…

Are you still seeing this problem in your Jira development instance? Have you been able to replicate it on another Jira site at all?

Cheers!
Mel

I’m seeing it in at least three environments, just doing an inspect on a heading I can see --ds-font-heading-xlarge is not loaded and it’s using fallback.

One environment has the new UI, the other two I tried (different company instances) using old UI. So everywhere I can see.

Note, tried in Chrome and Firefox

Hey @PeterMcNeil2,

Hmm, I’m still not able to replicate that - I tried in 3 separate cloud instances but in all cases i’m seeing the tokens working just fine:

I think your best bet might be to raise a support request to look into this further!
Mel

1 Like

hmm how can you tell from that screen capture if it’s using the variable or the fall back?

I’ll raise a ticket.

(note I tried from a different network and machine, windows 11 and firefox, same result)

Thanks! I’ve let the developer & marketplace support team know to look out for your ticket. If you could share the exact steps to reproduce in the ticket for them (eg what specific screen & element in Jira you’re looking at etc) that’d be great. If there is an outage, then they’ll be able to raise it with the design system team.

Response from the ticket:

Typography hasn’t been released to production in Jira yet, and it’s also not available to the ecosystem(atlas kit) at this point. GA for the topology is expected around mid-next year. The availability in Jira is part of the visual refresh program, which we anticipate will occur around the same time or possibly even earlier.

Which would explain it.

1 Like