Global colours and styles #11

Closed
opened 4 months ago by a258wang · 1 comments
Owner

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.

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 4 months ago
e26chiu self-assigned this 4 months ago
Poster
Owner

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 closed this issue 4 months ago
Sign in to join this conversation.
No Milestone
No project
No Assignees
1 Participants
Notifications
Due Date

No due date set.

Dependencies

No dependencies set.

Reference: www/cs-2022-class-profile#11
Loading…
There is no content yet.