Problem:

From other UI Libraries, I am used to having some sort of Box and/or Stack component that provides an API to the underlying tokens system.

In Fluents V2 docs under “design language”, they specifically state all sorts of token abstractions for stuff like colors, shadows, spacing, materials, motions, and so on. For example spacing: How do I access the defined spacing ramp? In MUI you would for example be able to do this:

theme.spacing(2); // `${8 * 2}px` = '16px'

Or am I supposed to implement this on my own? I would like to understand the best practices here 🙁

What I know so far:

This post addresses at least the Stack issue, and I understand that V1 had all of those utility abstractions for layout, etc. But I can’t find any hints on the official V2 docs and the react storybook.

Ive come across this section of the V1-docs, where they do exactly what Iam looking for:

// via react package
import { getTheme } from '@fluentui/react';

const theme = getTheme();

<div style={{ boxShadow: theme.effects.elevation8 }}>

//via theme package
import { DefaultEffects } from '@fluentui/react';

<div style={{ boxShadow: DefaultEffects.elevation8 }} />;

Am I supposed to use this method even for V2?

Any help would be greatly appreciated, we are at the beginning of using FluentUI and I have no prior knowledge of their ecosystem.