design tokensto style our components, for example
box-shadows. These tokens are stored as
SCSS variablesand reused throughout the app.
greenwhen it represents a call to action and
redwhen it triggers a destructive action. Rather than making the
greenby default and then overriding the
colorfor, say, the
delete-accountaction – use variants! Pass the
rounded-buttona prop, such as
color: danger, and then apply the respective
-danger, then target them like this:
hover, do they have a rounded border – all that is part of it.
child selector, like this:
height. If it is important that a component always has the same dimensions (the height of a button should be consistent, for example) define it within the component itself, if a component should have flexible dimensions (a card, for example, could stretch over the whole screen in one place and be limited to a certain width in another) define the dimensions in the parent.