Global colours and styles
Closedopened 8 months ago by a258wang · 1 comments
We should define some global variables/CSS/etc. for styles that will used throughout the entire site. This includes colours, fonts, and maybe line height/spacing.
a258wang added the
Configlabel 8 months ago
e26chiu self-assigned this 8 months ago
- We've decided to just focus on dark mode for now - so don't worry about the light mode colours 😄
- Too many colours:
- There are a lot of subtly different colours used in the designs on Figma. For this, you can use your own judgement - if two colours are just slightly different for no good reason, feel free to only include one of them.
- There are several gradients used in the designs, however they aren't very visible. Let's omit them for now, plus we can always add them back in later if we want.
- Colour names:
- Please either pick a naming scheme like "background"/"primary-accent"/"text", or like "navy"/"navy-light"/"peach"/"pink". I personally would prefer something like the latter as it will be easier for us to work with in the short term, and it shouldn't be too difficult to change the names later if we want.
- Please add the commonly used fonts to the repo. This Google Webfonts Helper is very helpful for generating the appropriate CSS font-family declarations and downloading the font files all at once.
- Let's not worry about font sizes/spacing in this ticket, since there aren't defined standards in Figma.
- CSS vs. JS variables for colours:
- Ideally, it would be nice to have the colours (hex strings) available as JS variables or something similar, in addition to CSS variables. Based off my (very limited) experience, having the colours in JS is the easiest for colouring visx stuff since they often get passed around as props, though ideally we also want a single source of truth between JS/CSS...
- For an example of what is meant by "JS variables", here is the temporary solution for the colours used in the bar graph component.
- If this single source of truth business becomes too complicated and messy, then we can always just copy-paste the colour variables into both CSS and JS for now, and think about refactoring later.
e26chiu referenced a pull request that will close this issue 8 months ago
Reference in new issue
There is no content yet.
Delete Branch '%!s(<nil>)'
Deleting a branch is permanent. It CANNOT be undone. Continue?