I'm on mobile so forgive me for not giving more extensive code examples. In my case, I'm building my app with React, TypeScript, and react-jss. I've got an enum which stores my common media queries and I just use it in the style declaration.
button: {
[MediaQueries.Medium]: ...
}
I can't use CSS variables for that but I personally don't think it's useful to let the user redefine those queries anyway