vendure
vendure copied to clipboard
vendure-ecommerce
feat(admin-ui): Migrate Clarity to Tailwind
Description
This PR removes the styles of the Clarity design system and replaces them with Tailwind. Styling is done in a backwards compatible way, which means that all clarity classes will be removed.
Important: This is heavy WIP and more like a PoC right now. We are especially thinking about backwards compatibility.
Relates to https://github.com/vendure-ecommerce/vendure/issues/2903
Breaking changes
There could be some breaking changes, if extensions rely on specific Clarity classes which were not used in the Admin UI initially.
Checklist
📌 Always:
- [x] I have set a clear title
- [ ] My PR is small and contains a single feature
- [ ] I have checked my own PR
👍 Most of the time:
- [ ] I have added or updated test cases
- [ ] I have updated the README if needed
@nino-magazinovic yeah, we are eager to move away from the Clarity Design System. Right now we are exploring various options, how to integrate Tailwind in the best way possible. If you have any input and ideas, they are more than welcome!
@davidhoeck The solution should have established marketing, business support, Figma design system, community, example pages and components to acceleration development on admin and storefront, integration to multiple frontend frameworks, fully extendable.
Copy paste approach and clean default Vercel theme (black/white) like shadcn/ui.
Options:
- Flowbite
- daisyUI (abstraction of Tailwind utility classes)
- spartan/ui (Angular component clone of shadcn/ui)
- tw-elements
Resources:
- https://flowrift.com/
- https://www.hyperui.dev/
- https://github.com/aniftyco/awesome-tailwindcss
- https://www.tailwindresources.com/
In any case, do not change the Nestjs and Angular stack 🥇
@nino-magazinovic thanks for the great input. We are already looking at Spartan, because it provides the same approach as Shadcn does. Only problem is that they are still in alpha, which makes it unclear for me if it is mature enough to use in our platform.
As a general suggestion for the overall setup I suggest using the ability of Tailwind to set up aliases for your colors in line with Material ui, makes it easier to modify this down the line. It's also relevant to keep track of dark mode from day one. If you can use a library that offers all of that stuff out of the box, even better.
We use primary, secondary, warn, highlight and error classes as aliases for our color scheme. We also use e.g. primary-contrast: white as a way to define the text colors that sit on top of buttons and such. That way you can set className="bg-primary-600" instead of className="bg-blue-600". You can easily set that up in tailwind.config.
One of the biggest challenges I found in this space is finding a good date-time picker. This is a great direction bc it has great keyboard support: https://shadcnui-expansions.typeart.cc/docs/datetime-picker but shadcn even lacks an out of the box year selector, even though there are some good suggestions to implement that in the issues.
@mschipperheyn yes, that's an absolute must. I also like the approach of descriptive color names way better, than just the color name itself.