Customizing the whole third party UI library built with Stitches

[mimshins]

Lets say we have an UI library built with stitches. Now we're using this UI library in a project which needs to override the theme tokens for all the components. (i.e primary color or spacings)

in Material-UI you can createTheme and pass down the theme object via ThemeProvider and it's going to let the components override the tokens. This approach requires runtime operations.
How can I achieve the same thing using stitches. (sorry I'm a newbie to stitches)

[lucastobrazil]

Good question! Thinking out loud... Stitches basically pre-compiles all the styles and uses css variables to map the theme values to styles that are generated. so you'd probably need to / want to somehow override all those variables in your app

// In stitches.config.js of your UI library

const { styled } = createStitches({
    theme: {
        colors: { primary: 'tomato' }
    }
});

// In component:
const Button = styled('button', {
    backgroundColor: '$primary' // var(--stitches-color-primary)
});

Then in your app:

   <style>
    :root {
      --stitches-color-primary: cadetblue;
    }
</style>

Just thinking out loud on this, would be keen to know other people's thoughts.

For dark mode, internally in our UI we basically use the same concept... var(--primary) just basically switches values while the component's style definition remains unchanged

[vic08]

I've got pretty much the same question. What's the right way of creating a UI component library that is styled with Stitches, which can be easily customised with a different theme or extended. The fact that each component is supposed to be styled with a styled() function returned from createStitches() makes it not clear, how can I avoid a circular dependency between the client code (where createStitches() is called and the UI library module

// ./application/theme.ts

import { createStitches } from "@stitches/react";

export const { styled } = createStitches({ /* ... */ });

// ./ui-library/component.tsx

import { styled } from "../application/theme"; // <= this dependency is not supposed to be here

const Button = styled("button", {/* ... */});

[vic08]

I think I roughly got how this is supposed to be done with stitches. You need to move the createStitches() call to your UI library and export the value that you get from createStitches(). It contains all you need to customize your theme, components, global style, etc..