Prepare Vellum to work with Stencil

[ry5n]

Previously #88; re-creating to change target branch as per #89.

For consistency Stencil components will all depend on a minimal set of shared variables. This PR ensures that Vellum plays nice with this set, and removes some unnecessary complexity from the existing variables file. Closes #72.

Status: Ready to merge

Reviewers: @tedtate @jeffkamo @fractaltheory Ticket: RTM-128/CSOPS-1256 Linked PRs: compare with https://github.com/mobify/stencil-variables/blob/master/variables.scss

Feedback

• See #88 for discussion.
• [x] +1
• [x] +1

  Changes

Made variable naming guidelines at the top of the file way more concise.

Removed or renamed:

• $sans-serif: removed; use $font-family
• $serif: removed
• $leading-ratio: removed; use $line-height or calculate ($line-height/$font-size) inline
• $disabled-color: removed
• $background-color: removed
• $v-space and $-space: removed, were deprecated; use $unit by default
• $forms-border-color: removed; use $border-color by default
• $forms-input-color: renamed → $input-background-color
• $forms-active-border-color: removed
• $forms-focus-border-color: renamed → $focus-color
• $forms-border-radius: removed; use $border-radius by default
• $forms-font-size: removed; use $font-size by default
• $forms-font-family: removed; use $font-family by default
• $forms-checked-background: removed
• $forms-disabled-color: renamed → $disabled-input-color
• $forms-disabled-background: renamed → $disabled-input-background-color
• $forms-placeholder-color: removed

Added:

• $tap-size: the standard tap-target size; useful for consistent sizing of tappable elements
• $horizontal-input-padding, $vertical-input-padding: for consistent padding among buttons, inputs and other controls
• $input-padding: shorthand value for setting all input padding

  How to test-drive this PR

• Clone the repo and run npm install && bower install
• Run the default grunt task (just grunt on the command line)
• Open test/index.html in a browser
• Check out branch stencil-sync and run grunt again
• Open a new tab to text/index.html
• Ensure things compile; compare the before/after output. Some things will be subtly different, but the after state should be more consistent (e.g. before, some buttons/selects were not consistent heights)

[jeffkamo]

+1