Improve the Design Token system

[endigo9740]

Describe what feature you'd like. Pseudo-code, mockups, or screenshots of similar solutions are encouraged!

The initial draft of the design token system has been a huge hit and very well received. However, we would stand to make some significant improvements to make it even better.

This includes, but is not limited to the following:

• Split the tokens into smaller stylesheets, similar to Tailwind Elements, for better organization
• a11y: Introduce a new on-{x} color system for text and icon fill colors when overlaid in buttons, etc
• Update theme generator to support on-{x} properties
• Flush out the tokens that already exist, ensure there are no gaps
• Improve the documentation page, provide better examples.

What type of pull request would this be?

Enhancement

Any links to similar examples or other references we should review?

Material Design has some references we can follow:

• https://m3.material.io/foundations/design-tokens/overview

This may be one of the final updates required to close out:

• Accessibility (a11y) improvements for visual disabilities and color contrast #151

[endigo9740]

NOTE: I have modified the accent and background props on the AppRail and Tile to be active and hover respectively. This better matches the new token values.

[endigo9740]

NOTE: .card-body has been dropped in favor of p-4. .card-header|body remain.

[endigo9740]

I've got MOST existing styles flushed out, just need to run through and documented. I think we should handle applying these to various elements and components in a dedicated pass. Either at the tail end of this PR or separate one.

[endigo9740]

This is now ready to review per this PR:

• Design Token Expansion #638

Here's a preview link:
https://skeleton-docs-git-feat-design-token-expansion-skeleton-labs.vercel.app/elements/tokens