Help Scout color scheme for Seed!
npm install seed-color-scheme-helpscout --save-dev
This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:
var gulp = ;var sass = ;var pack = ;gulp;
Note: Because seed-color-scheme-helpscout has dependencies, its includePaths output will be an
array. If you're including other paths in addition to seed-color-scheme-helpscout, you will need to flatten the array. An easy way to do this is to use sass-pathfinder.
Example with sass-pathfinder:
var gulp = ;var sass = ;gulp;
Once that is setup, simply
@import seed-color-scheme-helpscout as needed in your
After doing an
@import of the Help Scout color scheme, use the
_color() function (part of the Seed Color function pack) to reference a color:
// Input (main.scss)// Import the color scheme;// Use the color scheme.my-class
// Output (main.css).my-class
The following variables can be found in
// Base// Primary100:200:300:400:500:600:700:800:900:),200:300:400:500:600:700:800:),200:300:400:500:600:700:800:),// Secondary100:200:300:400:500:600:700:800:900:),100:200:300:400:500:600:700:800:900:),100:200:300:400:500:600:700:800:900:),100:200:300:400:500:600:700:800:900:),100:200:300:400:500:600:700:800:900:),),)) !