TODOs:

• Move fonts to panda

  • little reminder that nextjs has there only font loading solution

• Move global styles from vanilla to panda

  • grep for globalStyle to see where I am using it with vanilla

• Move over all non-Typography components

• Move over Typography component, perhaps using panda recipes OR mabye text styles in the theme like this

• Move over radix-colors to panda.config.ts

• Remove all of vanilla-extract from the codebase

• Can I delete the public/fonts folder now that Im using next/font/local?

• Button disabled state is not working

Ergonomics: What I didn't like about Vanilla CSS

• Couldn't author .css.ts outside of app/components 🤯
• The way I have setup the Typography components, its near impossible to override the margin of these elements
• I miss writing css in same file as the component
• I miss the styled syntax

Ergonomics: What I liked about Vanilla CSS

First off, for my personal work, I love writing CSS-in-JS. So any solution that is not that will have to overcome a very high bar for me. That said, I know that CSS-in-JS comes with tradeoffs. It is trying to reduce those tradeoffs that lead me to try Vanilla CSS. And happy to see CSS-in-JS contiuning to mature.

The largest thing that pushed me into realizing the shortcomings of emotion and styled-components was Server Components.

What is same and different about Panda CSS?

Same

Panda CSS, like Vanilla, is another CSS-in-JS library that supports Server Components.

Panda CSS, like Vanilla, also relies on PostCSS to generate CSS at build time.

Different

Overall, Panda CSS is presented with at a higher level of abstraction than Vanilla CSS. This is a good thing. It means that I can focus on the CSS and not the PostCSS. (While it was fun to build up a style systemfrom the lower level Vanilla, there are rough edges I want to smooth over and happy to let Panda CSS take care of that.)

Things I get from Panda CSS I didnt have with my Vanilla CSS setup:

• Panda CSS is setup to allow me to write CSS in the same file as the component.
• Panda CSS is setup to allow me to use the styled syntax.
• Panda CSS has out of the box support for design tokens.
• Panda CSS has seamless use of theme tokens in css({}).

Notes

• This switch reminds me of the move from aphrodite to styled-components.

Panda

• "recipes" give variants like button visual and sizes
• "patterns" are generic style functions i.e. "stack", "center", "grid", "flex", "circle", "container", "wrap" -> this can all be used as JSX components too! i.e <Stack />

Panda New Setup

• exploring not using semantic tokens for the moment....

Open issues as of this writing that I ran into:

• https://github.com/chakra-ui/panda/issues/792

Prior Art:

• Ark website: https://github.com/chakra-ui/ark/blob/9cf505020148f62d870656f1aaeeb88d7080cc24/website/src/theme/global-css.ts#L35