Allow defining font variable externally (for vanilla-extract)

[Dremora]

Goals

1. Allow defining font variables externally, e.g. via vanilla-extract
2. Reduce duplication and eliminate errors when renaming font variables

Non-Goals

No response

Background

I'm using vanilla-extract to style my application. It allows creating automatically scoped variables. However, such variable can't be passed to a font function, I get the following error: Font loader values must be explicitly written literals

This doesn't even work within a single file:

// Broken!
export const interFamily = '--inter-family';

export const inter = Inter({
  subsets: ['latin'],
  variable: interFamily,
});

And so, I have to duplicate myself when defining styles:

style({
  fontFamily: '--inter-family'
})

I can't use font.variable inside vanilla-extract files, since vanilla-extract can't execute code from next/font.

I want to be able to use this variable externally. Even if it's not defined via vanilla-extract, having to copy the token '--inter-family' is very error-prone - changing it in one place doesn't automatically update the other. Also, it fails quietly.

Proposal

I'm not familiar with the implementation details, so can't offer any advice here.

[eokoneyo]

bumping this for attention... it would be great to be able to opt-out of this at the very least, especially in the case where one would intentionally want to pass a value externally, from say a design system contract.