seed-color-scheme-helpscout
Help Scout color scheme for Seed
Install
npm install @seedcss/seed-color-scheme-helpscout --save
Documentation
Check out our documentation of this pack.
Basic Usage
SCSS
This seed pack needs to be imported into your sass pipeline. Below is an example using Gulp:
const gulp = require("gulp");
const sass = require("gulp-sass");
const pathfinder = require("sass-pathfinder");
const pack = require("@seedcss/seed-color-scheme-helpscout");
gulp.task("sass", function() {
return gulp
.src("./sass/**/*.scss")
.pipe(
sass({
includePaths: pathfinder(
// Other includePaths...
pack
)
})
)
.pipe(gulp.dest("./css"));
});Once that is setup, simply @import seed-color-scheme-helpscout as needed in your .scss file:
// Packs
@import "pack/seed-color-scheme-helpscout/_index";Options
The following variables can be found in _config.scss
// Help Scout color scheme config
$seed-color-scheme-helpscout: (
// Base
white: #fff,
black: #000,
// Primary
blue: (
100: #F3FBFF,
200: #D6EDFF,
300: #A0D4FF,
400: #57B0FB,
500: #1292EE,
600: #0077CC,
700: #005CA4,
800: #034077,
900: #002651
),
charcoal: (
200: #93A1B0,
300: #748494,
400: #556575,
500: #405261,
600: #314351,
700: #253642,
800: #1d2b36
),
ash: (
200: #F9FAFA,
300: #F1F3F5,
400: #E5E9EC,
500: #D5DCE1,
600: #A5B2BD,
700: #B7C2CC,
800: #A5B2BD
),
// Secondary
gold: (
100: #FFF9EF,
200: #FFF2D7,
300: #FFE7B8,
400: #FDD88E,
500: #FFC555,
600: #FAB347,
700: #E89635,
800: #CE7129,
900: #B24319
),
green: (
100: #F5FFF9,
200: #E3FBEE,
300: #C2F0D7,
400: #87DBAE,
500: #56C288,
600: #39AC6E,
700: #268C55,
800: #106236,
900: #003C1C
),
pink: (
100: #FFF9FB,
200: #FFEEF1,
300: #FFE1E7,
400: #FFCCD7,
500: #FFB3C3,
600: #FD9AAE,
700: #FD9AAE,
800: #FC5D7D,
900: #F23459
),
lavender: (
100: #F9F9FF,
200: #EBECFF,
300: #D9DCFD,
400: #B9BEFF,
500: #9FA6FF,
600: #818AEC,
700: #6269C5,
800: #404996,
900: #232A5C
),
indigo: (
100: #F2F6FF,
200: #DFE7FF,
300: #B2C8FB,
400: #79A1F8,
500: #527CEB,
600: #3B64D2,
700: #2549A8,
800: #16337F,
900: #071E57
),
whaletail: (
100: #F3F7FF,
200: #E5EDFE,
300: #D0DEFD,
400: #AFC7F9,
500: #8AABF1,
600: #7296E1,
700: #5174BB,
800: #304F8B,
900: #142F5E
),
text: (
default: #2b2b2b
),
button: (
border: #d5d5d5,
hover: #e6e6e6,
active: #b6b6b6
)
) !default;