Hey @remie,
Our migration guide can be found here: Migrate to tokens - Tokens - Atlassian Design System
Tokens are not a 1:1 match between the old and the new, so some manual reconciling is required. I encourage you to try to find the best semantic match for a token, rather than colour-matching. Consider the existing colour (N10), property type (background) and interaction state (hover) there should be a token to suit your needs.
In your case N10 is a light neutral colour. Assuming it’s for the side navigation, which is a large containing element, we would recommend a surface token (see migration guide for information on surfaces). For example, that might resolve to elevation.surface.sunken.
That being said, the naming scheme is going to continue to evolve over time, and we’re going to try to make it as intuitive as possible. @hitsthings’s feedback is totally valid and we’ll feed that back to the team. (this has actually come up before).
If you have trouble deciding which token to use we provide an interactive Token picker, which is a Q&A-style decision tree. If you follow the prompts it should give output an appropriate token.
The tokens are currently not part of the final generated CSS that I can inspect in my browser. If I look it up in the inspector, it will say
var(--ds-surface, #FAFBFC), but that does not translate to a token.
It’s possible to inspect the component via atlassian.design. If you navigate to the component page and enable the new light or dark themes with the theme switcher in the top navigation, you will then be able to see the variable values in the inspector.
For example, the side-nav can be found here: https://atlassian.design/components/side-navigation/examples
That being said, would you be interested in enrolling into our ecosystem EAP to give tokens a try directly in your app? You’ve shared some good feedback on the API already so far so could be beneficial for you to participate more directly. More information here.