fix: add text and bg colors to loading toast #217
Conversation
src/routes/+layout.svelte
Outdated
| @@ -68,6 +68,7 @@ | |||
| classes: { | |||
| toast: | |||
| 'shadow-xl px-4 py-3 flex items-center gap-x-3 max-w-full w-full rounded mx-auto text-xs mx-0', | |||
| loading: 'text-shade-12 bg-shade-4', | |||
There was a problem hiding this comment.
The keyword shade in xxx-shade-n to define colors is a custom thing I added.
These are defined in tailwind.config.js and there are only 6 supported shades.
Therefore text-shade-12 doesn't exist and it uses the default font color, which it's fine in this case I think.
The bg-shade-4 background however is a bit too dark, let's just use bg-shade-0 instead so it's pure white in Light mode and black in Dark mode.
There was a problem hiding this comment.
BTW, I have an eternal struggle with color tokens and color shades. I've tried many different naming conventions and color progressions and I'm never satisfied, though the setup we have in Hollama is probably one of the best ones I've come up with so far, but it's still not good enough.
I'd be happy to go on a rant about this next time we talk if you are interested 😅
There was a problem hiding this comment.
You're right, my bad about text-shade-12. I'm removing that style because if we don't specify the text color, it takes the default and it still looks good.
Regarding bg-shade-0, I like how it looks in Light mode but I don't love it in Dark mode. I feel like it should have a lighter color than the container background, not darker (black), but it's just my impression.
Sure! We can absolutely talk about the color scheme. I think it's pretty good anyway! 🙌🏻
There was a problem hiding this comment.
Yeah, you are right, 100% black doesn't look great on dark mode but that same shade looks way worse in Light mode 😬
I've been thinking about refactoring the way the UI is themed but haven't had time to sketch it in Figma.
|
🎉 This PR is included in version 0.18.1 🎉 The release is available on GitHub release Your semantic-release bot 📦🚀 |
Closes #216