Token usages from within utils

[csantos1113]

• Fixes Token usages from within utils #7
• Organize Example layout

[Temzasse]

Your fixes and additions are looking good 👍🏻

I can think about the TS issue of theme a bit but we can definitely merge this as is and figure out a solution to the TS issue later since it's not a major issue.

We can drop the #6 right? This is build on top of it so all its changes are included.

Thanks for the contributions! 🙌🏻 Keep them coming 😉

[csantos1113]

@Temzasse excellent. I cleaned this PR up. Yes, initially I built it on top just to reuse the Example layout organization. but this should be ready to go (I took out all useTheme related code). I'll deal with the conflicts in #6 afterwards

[Temzasse]

Cool 👍🏻

I quickly researched the theme TS issue and found out this trick that might be used to keep the theme object as const so that we can extract the token name, eg with a utility type, and then get the real type for the token by using the name as key:

type ExtractTokenName<T> = T extends `$${infer X}` ? X : never;
ExtractTokenName<'$foo'>; // --> 'foo'

I couldn't get it to work yet so let's try to solve this later.