Make theme CSS part of the package

[endigo9740]

Current users are required to do the following:

• Go to the docs site
• Navigate to the Themes section
• Tap on an preset theme, or generate their own
• Copy the CSS there
• Create a new themes.css locally within their project
• Import the theme into the root of their project, alongside app.post.css

We would dramatically improve this part of the process be embedding the theses into the /lib directory. This will mean they get packaged and distributed as part of the package. Then can then just import the CSS like many other packages do.

Likewise, we should make considerations for other CSS files to be included as well, such as our canned global styles.

[endigo9740]

This is now ready to test on branch feat/theme-css. Use the GitHub CLI to pull and test via:

gh pr checkout 137

This does the following:

• Moves /src/themes -> /lib/styles/themes
• Divides our global CSS into smaller "stylesheet add-ons" in /lib/styles/{core|typography|forms}.css
• Updated all documentation pages relevant to this change.
• Declutters the Styles guide a bit, now "Presets" and the "Theme Generator" are folded under a radio group

NOTE: all instructions are specific to the selected framework.

If you would like to test these instructions in a new Skeleton project, you'll need to create a local package to install. To do this, follow the instructions below:

1. Pull down the branch and run the following in the root npm run package
2. Move into the package directory via cd package
3. Create a local tarball (like a zip) via: npm pack
4. Cut and paste the .tgz file into the root of your new Skeleton project
5. Finally run npm install {tarballFile}.tgz to install locally
6. Follow all instructions in the documentation provided.

[endigo9740]

After thinking about it, the way we import the stylesheet add-ons may need to change slightly. The concept is right, but order of imports is wrong. Should be:

- @tailwind directives
- (these add-ons)
- Any custom global styles or overrides

The reason for this is the add-ons need to come -after- the directives, or they will not work as expected. They must also come before the custom styles otherwise you cannot override them (ex: override the default form background color)

Will need to move the import from the layout file to the global stylesheet itself.

This should not interfere with general testing, just note this gotcha if you're writing your own styles.

[endigo9740]

I've pushed a change that resolves this. It seems Vite doesn't allow you to handle imports from node_modules within your global stylesheets. So instead I've implemented an additional import that handles the @tailwind directives. The preferred order of import from top to bottom is:

tailwind.css
core.css
typography.css
forms.css -> only if you use the TW forms plugin
(global stylesheet here)

Here's how that's presented: