Customizing Primer Primitives instead of theme object

[robaish]

TL;DR: is it possible to customize/define own Primitives that Primer React's theme object would fetch?

I'm basing a design system on Primer and I've created a customTheme object that's passed on to ThemeProvider. However, rather than e.g. defining all colors separately for each component in the customTheme, it would be nice to customize higher-level primitives directly. Is this possible to do and how?

There's a separate repo for Primitives so I thought about forking it, and perhaps there's a way to tell Primer React or our build tool (we use Vite) to not fetch the default Primitives and instead fetch the custom Primitives.

Any ideas greatly appreciated! 🙏

[joshblack]

Hi there @robaish! 👋 Thanks for taking the time to open up this discussion!

Totally get what you mean for customizing higher-level primitives when it comes to custom theming. I believe your approach with providing a customTheme object should work out perfectly for this use-case, if understand right, as we use that object to fetch the primitive values.

If this custom object uses a different value for that named primitive, it should resolve to that instead of the default from primer/primitives. Hope that makes sense! Let me know if you have any questions or if I'm misunderstanding anything 👀

[robaish]

Hey @joshblack ! Thanks for taking the time to write back.

Ok great – so currently, I'm deepmerging the default theme with an object where I override the default values:

export const customTheme = deepmerge(theme, { // custom values here }, });

This works, but I thought it might be handier to define the primitives directly since those are the values used many times over by the theme. But after inspecting the primitives repo, it didn't seem straightforward where the values are fetched from.

So for now, I decided to create my own "primitives" (color schemes etc) from scratch and reference those in the custom object I'm deepmerging.

Apologies if any of this is unclearly explained – if you have any more thoughts or tips, happy to hear them but no worries if not!

[fcollonval]

Hey @joshblack with the migration to CSS variables (as stated in https://github.com/primer/react/blob/main/packages/react/src/legacy-theme/README.md). I guess that the best path to use a custom theme is no more to create a custom theme for the ThemeProvider but create a custom theme style sheet for the Primer primitives design tokens, isn't it?