Stylex error: adding variables to stylex styling doesnt work

Question

I am creating a stylex design system for my Next.js survey app project. I want to create constants to be able to change the values in one place using stylex.definevars. When I do it the terminal throws out this error, but I do not know how to solve it, because those values should be constant. I have found out that it doesn't work with regular constants like redcolor = 'red' as well. Augmenting babelrc.js using the documentation didn't help either.

babelrc.js
module.exports = {
  presets: ["next/babel"],
  plugins: [
    [
      "@stylexjs/babel-plugin",
      {
        dev: false,
        stylexSheetName: "<>",
        genConditionalClasses: true,
        runtimeInjection: true,
        useRemForFontSize: true,
        genConditionalClasses: true,
        // Default: undefined
        unstable_moduleResolution: {
          // Use this when using the Haste module system
          // Where all files are imported by filename rather
          // than relative paths and all filenames must be unique.
          type: 'haste',
          // Override `.stylex.js` with your own extension.
          themeFileExtension: string,
        },
      },
    ],
  ],
};

import * as stylex from '@stylexjs/stylex';
import { accent, background, colors, primaryText } from './Variables';

export const colors = stylex.defineVars({
  primaryText:  'black' ,
  secondaryText:  '#333' ,
  accent:  'orange' ,
  background:   'white' ,
  lineColor: 'gray' ,
});

export const ButtonStyles = stylex.create({
  big: {
    fontSize: 24,
    padding: '15px 30px',
    margin: '0.3em'
  },
  med: {
    fontSize: 18,
    padding: '10px 20px',
    margin: '0.2em'
  },
  small: {
    fontSize: 14,
    padding: '5px 10px',
    margin: '0.1em'
  },
  primary: {
    // backgroundColor: colors.accent,
    // color:  colors.primaryText,
    borderRadius: 4,
    border: 'none',
    cursor: 'pointer',
    transition: 'background-color 0.3s',
    ':hover': {
      // backgroundColor:colors.accent,
    },
  },
  secondary: {
    backgroundColor: 'transparent',
    // color:colors.primaryText,
    border: `2px solid $background}`,
    borderRadius: 4,
    cursor: 'pointer',
    transition: 'color 0.3s, border-color 0.3s',
    ':hover': {
      color: 'white',
      // backgroundColor: colors.background,
    },
  },
  disabled: {
    opacity: 0.5,
    cursor: 'not-allowed',
  },
});

-- when i comment out hte wars i get an error
⨯ ./styles/ButtonStyles.tsx
Error: C:\Users\ondra\OneDrive - Gymnázium Opatov, Praha 4, Konstantinova 1500\Plocha\surveyapp\my-stylex-app\styles\ButtonStyles.tsx: Only static values are allowed inside of a stylex.create() call.
    at transformFile.next (<anonymous>)
    at run.next (<anonymous>)
    at transform.next (<anonymous>)
Import trace for requested module:
./styles/ButtonStyles.tsx
./app/page.tsx