2021 Design Notes

https://www.figma.com/file/JuglPkGI7p5QKcdBCj4hPR/Design-Handoff?node-id=0%3A1

Components

Card

• Has 3 elevations

• 2 positions (top, bottom)

• "shadow" color can be prop, set the default to be based on the design (pink or secondary)

Window Header

• Two sizes

• Takes background color,
• Can have a heading which is absolutely centered (css grid is the best approach from my experience)

Custom Theme toggle

• It is what it is
• Only background and text in certain areas
• Add css flags to enable the toggle

Courisel

• Create a mixin for generic?

Accordion

• It is what it is

Sections

Why get involved

• Perhaps look into horizontal scroll with snapping (https://css-tricks.com/practical-css-scroll-snapping/)
• This should give us a good native experience on phone and desktop

Past keynotes

• Set the height based on the content, image is absolute and hidden behind the content.
• Use css grid to ensure height of the largest - overflow hidden + translation for the magic (with js to have a dynamic translation distance, watch for resize)

Stuff

Gradient

• Having blue area wrapped in a parent, have it change depending on scroll percentage?

The line

• Have two refs as anchors, then generate line from there? (seems like the most "responsive friendly")