[WIP]: Css Tokens

[dblodorn]

Hey @losingmyego!
Let's use this issue to capture concept work around css tokens.

[losingmyego]

Currently considernig :

--Number of typography styles
--Button / Link states?
--Color assignments
-- Opacity?
--Drop shadow?
--Grid base?
--Strokes?
--Corners/Rounding?

[losingmyego]

Lingering thought — do any of these styles require set parameters to keep the design in tact or do we allow for everything to be open ended

[losingmyego]

Note to talk about nomenclature standards as well

[dblodorn]

Notes from our video chat:

• Being able to spec font sizes is very important... But for smaller scale apps/sites we don't need a massive amount of tokens.
• Based off of design explorations we can extract a VERY primitive theming layer... this could be as simple as a couple pairings of color tokens, along with 2 - 3 fonts, or perhaps a more conventional typographic approach of font pairings.
• BEM syntax: https://css-tricks.com/bem-101/: inspiration for naming conventions for whatever non tailwind, custom classes we decide to layer on top.
• We can also leverage tailwind for theming stuff - although I think it could be benificial in the longer term to explore theming options that can scale in a framework agnostic manner. https://tailwindcss.com/docs/theme
• Lets use the neosound-sandbox app as place to do some rough implementations... we could even add a little UI to mess around with tokens - some prior work in the loom below.

https://www.loom.com/share/842d280800d14c50af52a499a211d7de

[dblodorn]

@losingmyego
https://drive.google.com/file/d/1p52tkGqqUo5WqLCEJDdHGCZK0g5VDI6B/view

[losingmyego]

@dblodorn here is progress so far on the tokens - will be working to hopefully finish these today https://www.figma.com/file/IMYiNZVVJCvO9Yjn0IBe1f/~neosound~-%5Bcommunity%5D?node-id=750%3A3734

[dblodorn]

@losingmyego this is great - i think we can experiment with layering an additional stylsheet over the default tailwind stuff... typography is a nice test case.

@Javier-Szyfer @0xTranqui @salieflewis this additional stylesheet could be referenced in different UI components we write.