feature: Configure global theme (font/colors) #10
Conversation
| --background-gradiant-light: #004278; | ||
| --background-gradiant-dark: #030304; |
There was a problem hiding this comment.
[Nit]: Really not a big deal but did you mean to write gradient instead of gradiant for these?
There was a problem hiding this comment.
I definitely meant to write gradient, good catch!
| const font = Poppins({ | ||
| weight: ["400", "700"], | ||
| subsets: ["latin"], | ||
| }); |
There was a problem hiding this comment.
[Question]: Any reason why we're only importing normal and bold weights for Poppins 🤔 How do you feel about also modifying the weights in the tailwind theme to reflect this? If you think its pointless then no biggie, we can keep the tailwind theme as it is and just ensure we only use font-normal and font-bold 😎.
There was a problem hiding this comment.
Each font-weight requires a separate font definition to use; including all of them by default is generally not recommended. It's a good callout though that we'll need to watch for uses of other font weights accidentally (made much easier by tailwind) but there are good reasons to do that anyways.
There was a problem hiding this comment.
Re-reading the link you sent; I see your idea was to remove these from Tailwind entirely- that's a great idea and I'll definitely give that a try.
There was a problem hiding this comment.
From discussion on Discord, we'll leave this alone as it doesn't have the desired effect:
- Limiting the available fontWeights doesn't protect against using them; the classes are just undefined.
- The config defines a global theme which isn't specific to the font - so you may have another font which supports 500 and would want access to font-medium there.
- We seem to be using CSS Modules instead of Tailwind anyways, so I'm inclined to stick with that anyways rather than try to customize this.
Resolves #6. This configures the global theme (font =
Poppins, colors matching our slide decks). As best I can tell, it's not feasible to useprefers-color-scheme: lightas a 'dark mode by default' feature sincelightis the default value (as opposed to strictly being an opt-in preference). Could be something to revisit later; for now will remove the media query but keep the CSS variable setup for future use.