@asbhogal
Posted
Hi Rodrigo,
This is a really interesting approach and it's great to see some out-of-the-box approaches, with rem units for font-size also used.
I'd say in terms of typography, keep these consistent as the Elegant version has multiple versions across different cards. The font is also hard to make out on some of these cards across the themes because the background/foreground contrast ratio is very low, making it difficult in particular for screen readers and those with assistive technologies to read.
Also, if you're using React I'd suggest deploying to a more robust platform like Vercel or Netlify which handles caching, performance and stability much better. They have CI/CD and debugging to identify errors during build and if you use Vite (more on this below) it will automatically build your application with each Git push, without needing to run an npm script.
Following on from this, avoid using CRA as Meta have stopped supporting this. For client-side applications like this, use Vite, which supports vanilla, React, Angular etc.
Locally host your Google Fonts for privacy and performance reasons. Since you're using an npm environment, you can install the Noto Sans typeface using Fontsource, import the weights you need and declare the properties in your elements. Here's a link to documentation Link
With your directories, I'd suggest splitting your styles from your logic files by using separate folders (ie. a css folder with your component stylesheets, since you already have separation of concerns)
Hope this helps!
