Make theme CSS part of the package about skeleton HOT 3 CLOSED

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.

from skeleton.

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.

from skeleton.

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:

from skeleton.