Skip to content

Conversation

@broccolini
Copy link
Contributor

@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
Contributor 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.

2 participants