Component Styles: Add library color palette, sizing, fonts as sass variables

[ryelle]

This supersedes #64. We'll want to make sure all pages and components are using consistent colors, font sizes, and spacing rhythm, which we can do by creating sass variables and mixins. As the hifi designs stabilize, we can grab this info and set up the right variables. Then we can update the existing components to the hifi designs, using the new variables.

@LevinMedia @jameskoster @josemarques When designs have settled (or if they are already), can you either link to an invision project with all your library components, or post an export of this info?

[jameskoster]

@LevinMedia I'm thinking we should make our symbols library the source for this. Agreed?

[ryelle]

@jameskoster @LevinMedia I think most of what's needed here is in p6riRB-3ja-p2 👍 Are there hover/active/focus styles for plain links (for example the ActivityPanel breadcrumbs, or the links in report tables) anywhere?

[jameskoster]

Link hover/active/focus styles should simply match GB core, but purpleised.

Re table links, I think reports should behave just like all other links. We have some tables on the dashboard as well though; "Top selling products" etc. These are slightly different as the entire row should be the link. The hover style for the row should match the other tables as per p6riRB-3lZ-p2

[ryelle]

This is for generic styles, so I'll move your table feedback to #286

Can you give me actual colors for hover/active/focus? I think it's $woocommerce-500/#95588a for a neutral link, but I'm not sure how much lighter you want it for hover; should the focus style stay a blue halo, or do you want a purple halo?

[jameskoster]

I think $woocommerce-400 should work for hover; #af72a4.

For the focus styles, a purple halo using $woocommerce-200 (#e2a5d7 ) with text color $woocommerce-800 (#490c3e) would be good.

[belcherj]

@ryelle Is this complete? Can we close?

[timmyc]

Closing this out, we can re-open if need be.