add component-specific variant theming

[cixzhang]

This completes the theming system. Typescript has some nice features that allow us to augment the theme type at the component level, so new components can register the ability to theme their variants. We demonstrate component variant theming in the neutral theme where the primary button's text needed adjustments in dark mode.

Screen.Recording.2026-01-13.at.8.04.15.AM.mov

For review, I recommend taking a look at neutralTheme.tsx to see what a custom theme looks like in this system.

[mellyeliu]

Please use the modern pseudo-class syntax for proper style composition - you should be able to slot that as an instruction to the LLM for it to convert these.

Suggested change

	backgroundImage: {
	default: null,
	':hover': `linear-gradient(${colorTokens.hoverOverlay}, ${colorTokens.hoverOverlay})`,
	':active': `linear-gradient(${colorTokens.pressedOverlay}, ${colorTokens.pressedOverlay})`,
	},
	outline: {
	default: null,
	':focus-visible': `2px solid ${colorTokens.focusOutline}`,
	},
	outlineOffset: {
	default: null,
	':focus-visible': '3px',
	},

[mellyeliu]

Would like to better understand why we're going the route of using a React Context instead of defineVars/createTheme and if we're set on pre-transpiling the components. If we use -- key syntax within defineVars the variables should be modifiable in the consuming apps.

[cixzhang]

In this case, it's so we can deliver fully composed styles. Like for button variants, a primary button is the combination of a background color + text color + border radius. We can't easily provide arbitrary compositions through purely CSS variables as far as I'm aware.