seed-color-scheme-helpscout
Version:
Help Scout color scheme for Seed
204 lines (166 loc) • 4.15 kB
Markdown
# seed-color-scheme-helpscout [](https://travis-ci.org/helpscout/seed-color-scheme-helpscout) [](https://badge.fury.io/js/seed-color-scheme-helpscout) [](https://david-dm.org/helpscout/seed-color-scheme-helpscout)
Help Scout color scheme for [Seed](https://github.com/helpscout/seed)!
## Install
```
npm install seed-color-scheme-helpscout --save-dev
```
## Dependencies
* [Seed Color scheme](https://github.com/helpscout/seed-color-scheme)
## Basic Usage
### SCSS
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](https://github.com/itsjonq/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](https://github.com/helpscout/seed-color-fn/)) 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;
```