svelte-society/sveltesociety.dev

Remove Tailwind and set up a design system using css custom properties

kevmodrome opened this issue · 4 comments

kevmodrome commented

This is a quite a big one but it needs to be done to make it easier in the future.

  • Add proper CSS custom properties for regular use (colors, grays, sizing, elevation, shadows)
  • Define common styles for headings (h1, h2, h3, etc.) and other common elements
  • Remove Tailwind (including all the preprocessing and files)

Edit: changed title to not be so rude.

brittneypostma commented

Going to try and get the basics of this set up for structure today so if anyone wants to help, they will have a good starting point. I was going to set up some aliases, do you care if it's @ or $?

  • 👍1
kevmodrome commented

I think $ makes most sense. You're thinking about doing a $components thing?

  • 👍2
brittneypostma commented

Yes, I usually use @ because it reads better, but I can set them up as $ because it's more standard to Svelte.

  • 👍1
brittneypostma commented

Here is a link to view the Figma file, once you view it I can change the collaborators to be able to edit the file.

Figma - Svelte Society

  • 👍1