feat: define the style system

[helmturner]

This issue has three parts:

• Configure the style utilities
• Define the brand guide
• Document pfreferred patterns and best practices

Configure the Style Utilities

There are three main points of configuration for the style system:

• 1. design/tokens.css.ts

This file creates a set of predefined, 'blessed' values to be used across the site. These are essentially the 'raw' values that act as building blocks for the rest of the system, however they can be used directly if needed (though this should be considered an escape hatch).

• 2. design/sprinkles.css.ts

The 'sprinkles' file exports a utility that can be used to construct scoped style utilities. You would use the 'sprinkles' function in a .css.ts to build utility styles, then import them into your component. See the sprinkles docs for more info.

• 3. themes.sprinkles.css.ts

I'm still not entirely set on how themes will be used. Currently they just provide a subset of tokens, but this implementation is likely to change.

Define the Brand Guide

This should ultimately be up to someone with a better eye than me, but for now I'm translating this as "figure out how to implement themes idiomatically so that, when someone with design sense wants to help, they can easily implement their vision"

Documentation

Much of this is still in an experimental state, but as this gets tested and refined we'll update documentation accordingly. For now, please refer to the Vanilla Extract Docs