What is Stack / Box aquivalent in Fluent UI V2 and best practice on accessing design tokens

[SBArbeit]

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 (or a dedicated API like a useTheme.)

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 the ecosystem.

[mainframev]

Hi @SBArbeit 👋🏻

Regarding tokens and their usage, styling in general, please take a look at the:

• storybook docs
• styles handbook
• theming

Tokens are exposed from @fluentui/react-components, so you can use them as following:

import { tokens } from '@fluentui/react-components';

const useStyles = makeStyles({
  row: {
    display: 'flex',
    gap: tokens.spacingHorizontalL,
  },
});


const Component = () => {
  const styles = useStyles();

  return (
    <div className={styles.row}>
      <div>1</div>
      <div>2</div>
      <div>3</div>
    </div>
  );
};

In v9 we do not provide Stack and StackItem as in Fluent UI Fabric UI. We have a shim components for migration purposes.

The Stack and StackItem components are not included in v9. Providing components that expose equivalent layout properties as CSS flexbox required learning another set of props without adding signficant value.

This quote from docs explains why 🙂

[SBArbeit]

Hey @mainframev, thank you so much!
I don't know how on earth I missed:

import { tokens } from '@fluentui/react-components';

I've tried so many things and probably forgot to check for tokens at some point, my bad.

Also thank you for the clarification about the Stack component :)