Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Em spacers #426

Merged
merged 6 commits into from
Jan 13, 2018
Merged

Em spacers #426

merged 6 commits into from
Jan 13, 2018

Conversation

broccolini
Copy link
Member

@broccolini broccolini commented Jan 5, 2018

This pr adds em spacer variables to primer-support. The scale is based on commonly used fractions that work with our typography and line-height scale.

Fixes: #397

This is already mostly documented in the styleguide, have updated to include the variables:

Variable Fraction Y Padding (em) Total height at 14px Total height at 16px
$em-spacer-1 1/16 .0625 22.75 26
$em-spacer-2 1/8 .125 24.5 28
$em-spacer-3 1/4 .25 28 32
$em-spacer-4 3/8 .375 31.5 36
$em-spacer-5 1/2 .5 35 40
$em-spacer-6 3/4 .75 42 48

To do:

  • update docs
  • update primer components to use spacers
  • test in github/github

/cc @primer/design-systems

- flash
- breadcrumb
- button
- states
- markdown lists
- markdown-body
- support button mixins
- tooltips
@broccolini
Copy link
Member Author

Review-lab branch for testing in github here: https://primer-em-spacers.review-lab.github.com

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

1 participant