search

frontend-horse / holiday-show-page-2022

https://fundraiser.frontend.horse/
5 stars 5 forks source link

Design tokens! #26

Closed mayank99 closed 1 year ago

mayank99 commented 1 year ago

I've added a very basic set of global design tokens in theme.scss. Can be extended later.

I've left the colors unchanged everywhere except one place: I eliminated the hardcoded red in the register button in the header and unified it with the cta banner. All other color changes are either getting rid of unused colors or converting them from hex to hsl.

The rule/convention for modifying and adding colors is quite simple: color values should only be present in theme.scss; components should not contain random colors. Just following this one rule makes it tremendously easier to change themes in the future or implement new ones.

In practice, this is done in two steps:

  1. In theme.scss, alias any colors (whether raw values or open props) to meaningful names.
  2. Inside components, either use the aliases directly or create another level of aliases and use those.
netlify[bot] commented 1 year ago

Deploy Preview for elegant-basbousa-49f5aa ready!

Name Link
Latest commit bd1ceadc3c88a2d1c354481e39ced5c8e1457c4b
Latest deploy log https://app.netlify.com/sites/elegant-basbousa-49f5aa/deploys/63890a8e4ae60400080bef4d
Deploy Preview https://deploy-preview-26--elegant-basbousa-49f5aa.netlify.app
Preview on mobile
Toggle QR Code...

QR Code

Use your smartphone camera to open QR code link.

To edit notification comments on pull requests, go to your Netlify site settings.

mrtrimble commented 1 year ago

Ah dang, I approved before noticing the conflict - this might be because I merged #25 first?

mayank99 commented 1 year ago

@mrtrimble Merge conflict should be fixed now. I also moved the gradients completely into theme.scss so that they are easier to change.