Button component defaults

During the Athens meet, we discussed that the following variables should be connected to the Button component.

borderWidth
borderRadius

colorPrimary (if the button is primary)
colorSecondary

colorText (applied on text for secondary buttons)
colorTextReverse (applied on text for primary buttons)

Is there any more values (beyond variables that would go into this element?)
eg. min-width comes to mind

The output of this should be a list of defaults for this element, so that the devs can translate to CSS.

---

Outcome

Primary button

Reference image

Default non-variable values

• Non at present

Primary button values

• background: colorPrimary;
• border-radius: borderRadius;
• border-width: borderWidth: 0;
• border-color: none;
• border-style: borderStyle;
• font-family: fontInterface;
• font-size: fontSizeBase;
• color: colorTextReverse;
• line-height: gridUnit;
• padding: gridUnit / 2;
• hover: 30% darker
• active: 30% darker
• disabled: opacity 50%
• press: 50% darker
• focus: colorPrimary, opacity 30%, width 3px

Secondary button

Reference image

Default non-variable values

• Non at present

Secondary button values

• background: colorSecondary;
• border-radius: borderRadius;
• border-width: borderWidth;
• border-color: colorFurniture;
• border-style: borderStyle;
• font-family: fontInterface;
• font-size: fontSizeBase;
• color: colorText;
• line-height: gridUnit;
• padding: gridUnit / 2;
• hover: 30% darker
• active: 30% darker
• disabled: opacity 50%
• press: 50% darker
• focus: colorPrimary, opacity 30%, width 3px