Where are the css variables generated in the fluentui source code?

Question

I want to implement my own UI based on fluent design system language (many tokens) with Emotion. This is some code of my lib.

import { css } from '@emotion/react';
import { tokens } from '@fluentui/react-theme';

const smallSizeCss = css({ padding: buttonSpacingSmall + ' ' + tokens.spacingHorizontalM});

export const Button = (props: ButtonProps) => {
  const {
    size = 'medium',
    shape = 'rounded',
    appearence = 'default',
    disabled = false,
    iconOnly = false,
    iconPosition = 'before',
    children,
  } = props;

  if(size == 'small'){
    buttonCss = {
      ...buttonCss,
      ...smallSizeCss
    }
  }

  return <button css={buttonCss}>{children}</button>;
};

var(--spacingHorizontalM) is not set screenshot

But the css variables don't exist, where can I find these specific values from the source code and generate the css variables in Emotion?

 var(--spacingHorizontalM) is not set