-
Notifications
You must be signed in to change notification settings - Fork 1
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
feature: Configure global theme (font/colors) #10
Conversation
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
LGTM 😎 Gonna leave this as a comment if any other @ufssd/webmasters wanted to take a stab at reviewing this :D.
--background-gradiant-light: #004278; | ||
--background-gradiant-dark: #030304; |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
I definitely meant to write gradient
, good catch!
const font = Poppins({ | ||
weight: ["400", "700"], | ||
subsets: ["latin"], | ||
}); |
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
[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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
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.
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Figured I should approve this since everyone else seems to be busy on their own PRs 😄. Feel free to ping me again if you decide to purge those tailwind font-weights on this PR and need me to take a look.
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: light
as a 'dark mode by default' feature sincelight
is 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.