Global colours and styles #11

New Issue

a258wang · 2022-06-03T01:58:43-04:00

a258wang commented

2022-06-03 01:58:43 -04:00

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

Config

label 2022-06-03 02:02:09 -04:00

e26chiu self-assigned this 2022-06-08 09:01:16 -04:00

a258wang commented

2022-06-10 01:01:49 -04:00

Additional Details:

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.
Fonts:
- 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.
- We can maybe use the solution presented here for sharing variables between CSS and JS: https://www.falldowngoboone.com/blog/share-variables-between-javascript-and-css/#custom-properties
- 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.

**Additional Details:** - 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. - Fonts: - Please add the commonly used fonts to the repo. This [Google Webfonts Helper](https://google-webfonts-helper.herokuapp.com/fonts) 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](https://git.csclub.uwaterloo.ca/www/cs-2022-class-profile/src/commit/2d671c5b677a2736435a89ac2b9e997873ba8939/components/BarGraph.tsx#L30) is the temporary solution for the colours used in the bar graph component. - We can maybe use the solution presented here for sharing variables between CSS and JS: https://www.falldowngoboone.com/blog/share-variables-between-javascript-and-css/#custom-properties - 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

2022-06-15 19:32:47 -04:00

Add global colours and styles (Closes #11) #14

e26chiu closed this issue

2022-06-17 23:41:10 -04:00

e26chiu referenced this issue from a commit

2022-06-17 23:41:11 -04:00

Add global colours and styles (Closes #11) (#14)

Sign in to join this conversation.