feat: add @tutorialkit/theme package to use the theme without astro

[Nemikolh]

While trying to use TutorialKit's React components in isolation, I noticed that they depend on the theme constants. While most users will probably want to provide their own config there to fully tweak them, being able to access default is going to be really useful.

Thus the @tutorialkit/theme package. Maybe we should name it @tutorialkit/unocss-theme? Curious to hear opinions here, @d3lm, @AriPerkkio and @SamVerschueren.

Furthermore, right now if we needed to update the shortcuts or the rules we couldn't because they are in the uno.config.ts file of the template. So once someone has created a tutorial they are stuck with their values unless they update them. By exposing them from this package we can now update them (for future tutorials at least).

[bolt-new-by-stackblitz]

Run & review this pull request in StackBlitz Codeflow.

[cloudflare-workers-and-pages]

Deploying tutorialkit-demo-page with    Cloudflare Pages

Latest commit:	a5af49c
Status:	✅  Deploy successful!
Preview URL:	https://8346ffcf.tutorialkit-demo-page.pages.dev
Branch Preview URL:	https://joan-unocss-theme-pkg.tutorialkit-demo-page.pages.dev

View logs

[Nemikolh]

I'm using a satisfies here so that they can import the theme and then override values and have autocompletion.

[d3lm]

LGTM 👍 🔥

Personally I am fine with @tutorialkit/theme.

[d3lm]

It's a bit risky to expose these cause it's a contract that the components rely on for the layout. But I guess if someone would change these they'd be own their own so it's on them if they break it.

[Nemikolh]

Yeah I agree, I honestly don't know what the best approach would be. I looked at how material ui does it:

They have a https://github.com/mui/material-ui/blob/v5.15.20/packages/mui-material/src/Button/buttonClasses.ts file which generate a bunch of class names and they don't do anything with it. But I think it lets you tweak the component entirely from CSS?

However it seems that you can also customize it via JavaScript when you look at this: https://github.com/mui/material-ui/blob/v5.15.20/packages/mui-material/src/Button/Button.js#L100-L119:

        backgroundColor: theme.vars
          ? `rgba(${theme.vars.palette.text.primaryChannel} / ${theme.vars.palette.action.hoverOpacity})`
          : alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
        // Reset on touch devices, it doesn't add specificity
        '@media (hover: none)': {
          backgroundColor: 'transparent',
        },
        ...(ownerState.variant === 'text' &&
          ownerState.color !== 'inherit' && {
            backgroundColor: theme.vars
              ? `rgba(${theme.vars.palette[ownerState.color].mainChannel} / ${
                  theme.vars.palette.action.hoverOpacity
                })`
              : alpha(theme.palette[ownerState.color].main, theme.palette.action.hoverOpacity),
            // Reset on touch devices, it doesn't add specificity
            '@media (hover: none)': {
              backgroundColor: 'transparent',
            },
          }),

But they also have hardcoded values in a few places, like https://github.com/mui/material-ui/blob/v5.15.20/packages/mui-material/src/Button/Button.js#L90 :

      padding: '6px 16px',

[AriPerkkio]

@Nemikolh I think this broke freshly generated tutorials:

• pnpm install; pnpm build
• Run node ./packages/cli/dist/index.js create and create new project. I used npm as package manager but might reproduce on others as well
• cd <new tutorial>
• npm install; npm run dev
• Error below shows:

To narrow dow the root cause to this specific PR, checkout to earlier d8a5a341df6c2d23d1d59ede61b4d3ef689af081 and repeat the steps. Everything works fine.

In future we'll have integration tests to prevent this kind of issues! 😄

[Nemikolh]

@AriPerkkio Ah this error is actually expected!

This is only an error now because this PR introduced a breaking changes and the updateWorkspaceVersion replace the packages with older versions that are here incompatible.

So hopefully integration tests won't error on this kind of changes. If you ran into an issue with them I think it's a bug.

[AriPerkkio]

Oh right, it's trying to use unreleased APIs from the older version of the package. 🤔