Can someone sell me on the convention of using -foreground for color variable names?

[dantman]

I came from a background of projects following the Material Design system so when I switched over to Tailwind CSS to get away from the bad parts of Material Design based libraries, I kept the patterns I considered good.

Naturally this means I ended up consistently following a convention of --color-on-{name} which resulted in a pattern of bg-primary text-on-primary

But both ShadCN UI and HeroUI are using the --color-{name}-foreground convention resulting in the pattern of bg-primary text-primary-foreground instead.
So clearly I'm going against the grain here.

So far I've just been refactoring components I add from things like ShadCN UI to follow my projects' coding style. But with ShadCN UI finally following a React 19 convention and needing to use more components I'm on the precipice of either refactoring my few components to the -foreground convention or refactoring more ShadCN based components to use the on- convention.

I did read through https://ui.shadcn.com/docs/theming but could not find any reasoning or advantages for use of -foreground. The on- convention was based on Material Design's "on" colors convention and I liked it because text-card-foreground seemed unnecessarily verbose while text-on-background seemed to fit perfectly.