seed-color-scheme-helpscout   

Help Scout color scheme for Seed!

Install

``
npm install seed-color-scheme-helpscout --save-dev
`

Dependencies

* Seed Color scheme

Basic Usage

$3

This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:


`javascript
var gulp = require('gulp');
var sass = require('gulp-sass');
var pack = require('seed-color-scheme-helpscout');

gulp.task('sass', function () {
return gulp.src('./sass/*/.scss')
.pipe(sass({
includePaths: pack
}))
.pipe(gulp.dest('./css'));
});
`

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:

`javascript
var gulp = require('gulp');
var sass = require('gulp-sass');

gulp.task('sass', function () {
return gulp.src('./sass/*/.scss')
.pipe(sass({
includePaths: pathfinder(
'./scss/vendor/example',
'./scss/plugins/super-awesome-plugin',
require('seed-color-scheme'),
require('seed-color-scheme-helpscout')
)
}))
.pipe(gulp.dest('./css'));
});
`


Once that is setup, simply @import seed-color-scheme-helpscout as needed in your .scss file:

`sass
// Packs
@import "pack/seed-color-scheme-helpscout/_index";
`




Usage

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:

`scss
// Input (main.scss)

// Import the color scheme
@import "pack/seed-color-scheme-helpscout/_index";
// Use the color scheme
.my-class {
color: _color(blue, 500);
}
`

`scss
// Output (main.css)

.my-class {
color: #3197d6;
}
`




Options

The following variables can be found in _config.scss

`sass
$seed-color-scheme-helpscout: (
// Base
white: #fff,
black: #000,

// Primary
blue: (
100: #f7fcfe,
200: #daf1ff,
300: #aedfff,
400: #71bff1,
500: #3197d6,
600: #237ab3,
700: #1f5e89,
800: #194c6e,
900: #143d57
),

charcoal: (
200: #93a1af,
300: #72808e,
400: #4f5d6b,
500: #394956,
600: #2a3b47,
700: #253540,
800: #1d2b36
),

grey: (
200: #f9fafa,
300: #f1f3f5,
400: #e3e8eb,
500: #d6dde3,
600: #c1cbd4,
700: #b4c0ca,
800: #a5b2bd
),

// Secondary
yellow: (
100: #fffdf6,
200: #fff6e2,
300: #ffe8b5,
400: #ffd56d,
500: #ffc646,
600: #f5b126,
700: #d79400,
800: #b37100,
900: #875200
),

green: (
100: #fafdfb,
200: #e4fbe6,
300: #c4f0ce,
400: #81dc9e,
500: #4bc27d,
600: #3cb170,
700: #2f9f62,
800: #228350,
900: #23633e
),

red: (
100: #fef7f6,
200: #ffe3e2,
300: #ffa2a2,
400: #f45b55,
500: #e52f28,
600: #d21b14,
700: #ba1f19,
800: #9d1f1a,
900: #731814
),

purple: (
100: #fbfbfe,
200: #eaeafc,
300: #d1d2f6,
400: #a3a4f3,
500: #7e80e7,
600: #696aca,
700: #585b9e,
800: #45467d,
900: #383966
),

orange: (
100: #fff8f2,
200: #ffead8,
300: #ffd3ae,
400: #ffa75a,
500: #ff9139,
600: #e87800,
700: #c76400,
800: #a45300,
900: #813c00
),

text: (
default: #2b2b2b
),

button: (
border: #d5d5d5,
hover: #e6e6e6,
active: #b6b6b6
)
) !default;
``