Is token overriding ok or to be avoided?

[tombohub]

docs say to be cautious when overriding style tokens: https://react.fluentui.dev/?path=/docs/concepts-developer-theming--page#overriding-existing-tokens

What do they mean?

For example, if I want to make everything more rounder I is ok to override Border Radii tokens or is that gonna cause problems all over?

[ValentinaKozlova]

Do you want to override token or just to customize component according to your design? If it's just a customization then rewriting tokens it's not needed. To customize your component use makeStyles:

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

const useStyles = makeStyles({
  customStyle: {
    borderRadius: '20px'
  },
});

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

  return (
    <div className={styles.customStyle}>
      {/* Markup */}
    </div>
  );
};

[tombohub]

Hi, I meant general change of style. For example if I want more rounded feel of a website, I change all radius tokens to little bit higher pixels. borderRadiusSmall 2px -> 4px and so on. Or if I want more roomier feel increase all the spacing tokens: spacingVerticalXXS 2px -> 4px and so on for every spacing token. Is that ok practice or it would mess up the look?

[ValentinaKozlova]

It shouldn't be a problem to change it. The thing is that these tokens might be used in places you don't expect and change of a token would cause style change in all the places. But I think it's ok to try to change it and if it works fine, why not?