Color scheme (Help Scout)
A series of color scheme variables with Help Scout’s color palette.
Install
npm install seed-color-scheme-helpscout --save
Dependencies
Usage
This pack consists of all the colors and shades in Help Scout’s color palette.
The _color() mixin (provided by seed-color-scheme) is used to reference a color from this pack.
example.scss.element {
background: _color(blue, 500);
}
example.css.element {
background: #3197D6;
}
Configurations
Below are the default Sass configuration variables for seed-color-scheme-helpscout. The variables can be found in the pack’s _config.scss file.
seed-color-scheme-helpscout/_config.scss$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;