v2 Support for Theme Generator

[endigo9740]

As part of @AdrianGonz97's recent rework to the Tailwind plugin for Skeleton v2, these are now defined in CSS-in-JS format as opposed to pure CSS.

• feat: Skeleton Plugin refactor #1660

Task 1: Update the Theme Generator

This provides a number of befits, however we'll need to update the Theme Generator to output new themes in this format by default. An example of the new format is provided below.

// my-custom-theme.ts

export const myCustomTheme = {
    name: 'custom-theme-name',
    properties: {
        // paste your custom theme properties here...

        // for example:
        "--theme-font-family-base": "system-ui, sans-serif",
        "--theme-font-family-heading": "'Quicksand', sans-serif",
        "--theme-font-color-base": "var(--color-surface-900)",
        "--theme-font-color-dark": "var(--color-surface-50)"
        // ... and so on
    }
};

// tailwind.config.[cjs|js|ts]

import myCustomTheme from './my-custom-theme'

plugins: [
    skeleton({
        themes: {
            custom: [
                myCustomTheme
            ]
        }
    })
]

Task 2: Update Theme Documentation

Given the number of changes, we need to update the /docs/themes documentation section to reflect the latest state of changes for v2. Most of this can be based around the migration info provided in this thread.