Color scheme
A library allows you to define variable-based color palettes. This Sass mixin/functoin combo helps improve consistency and maintainability of color variables.
Install
npm install seed-color-scheme --save
Problem
The current convention is to store all color variables in a variables file, which looks like this:
_variables.scss$blue: #3197D6;
$light-blue: #DAF1FF;
$dark-blue: #1F5E89;
$darkest-blue: #143D57;
$hero-background: $blue;
$secondary-nav-background: $dark-blue;
Things start to get messy when your color palette grows and when you create variables to reference color variables (e.g. $hero-background).
Solution
We believe the best way to organize your colors is to use a Sass map:
_colors.scss// Create our color scheme map
$colors: (
blue: (
default: #3197D6,
light: #DAF1FF,
dark: #1F5E89,
darkest: #143D57
)
);
Now we just need a way to access the color value to use it in our styles. The seed-color-scheme function/mixin combo makes it easy!
_colors.scss// Import the seed-color-scheme pack
@import "pack/seed-color-scheme/_index";
// Create our color scheme map
$colors: (
blue: (
default: #3197D6,
light: #DAF1FF,
dark: #1F5E89,
darkest: #143D57
)
);
// Create the color scheme
@include _color($colors);
// Use the color
.hero {
background: _color(blue, default);
}
Usage
The color scheming system requires using both the _color mixin and function to work. The mixin registers the color maps (regular Sass maps) into the global color scheme configuration. The function retrieves the color value from the global color scheme configuration.
_color (Function)
_color(arguments…)
| Argument | Type | Description |
|---|---|---|
arguments… |
String | Comma separated string values that correspond to the color scheme map. |
_example.scss.element {
background: _color(blue, primary);
color: _color(text, light);
}
Note: The _color function can only get colors adding to the color scheme via the @include _color mixin.
_color (Mixin)
_color($map)
| Argument | Type | Description |
|---|---|---|
$map |
Map | A Sass map consisting of color values. Nested maps are allowed. |
_example.scss// Create the custom color map
$my-colors: (
brand: (
primary: (
red: red,
blue: blue
),
secondary: (
yellow: yellow
)
),
text: black,
link: purple
);
// Adding it to the color scheme
@include _color($my-colors);
Note: Colors are only accessibile to the _color function after it’s been added to the color scheme via the @include _color mixin.
Defaults
If a key of default is defined for a map within your color scheme, the _color() function will default to it if no additional key argument is provided.
_example.scss// Create the custom color map
$my-colors: (
primary: (
default: pink,
red: red,
blue: blue
),
);
// Adding it to the color scheme
@include _color($my-colors);
.element {
color: _color(primary); // Will output pink, as it is defined as "default"
}
_example.css.element {
color: pink;
}
Namespacing
It is recommended that you namespace your color scheme when defining it with _color(). This is to prevent potential overrides with color schemes being defined by external Seed Packs or modules.
app.scss// Import the color scheme mixin
@import "pack/seed-color-scheme/_index";
// Namespace your color scheme. In this example, we're using "app"
$color-scheme: (
app: (
background: #f3f3f3,
),
);
// Set the color scheme
@include _color($color-scheme);
// Use your color scheme
html {
background: _color(app, background);
}
Configurations
Since update v0.1.0, seed-color-scheme adds a default color scheme from seed-color-scheme-helpscout as well as some default namespaces.
Below are the default Sass configuration variables for seed-color-scheme. The variables can be found in the pack’s _config.scss file.
seed-color-scheme/_config.scss// Base
@include _color((
white: #fff,
black: #000,
));
// Colors
@include _color((
// 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
),
));
// Namespace: Brand
@include _color((
brand: (
primary: _color(blue, 500),
danger: _color(red, 500),
error: _color(red, 500),
info: _color(blue, 500),
success: _color(green, 500),
warning: _color(yellow, 500),
),
));
// Namespace: Background
@include _color((
background: (
body: #fff,
ui: (
default: #fff,
lighter: _color(grey, 200),
light: _color(grey, 300),
),
),
));
// Namespace: Border
@include _color((
border: (
default: _color(grey, 400),
divider: _color(grey, 300),
ui: (
default: _color(grey, 500),
dark: _color(grey, 600),
),
),
));
// Namespace: Text
@include _color((
text: (
default: _color(charcoal, 600),
subtle: _color(charcoal, 400),
muted: _color(charcoal, 200),
),
));
// Namespace: Link
@include _color((
link: (
default: _color(blue, 500),
hover: _color(blue, 400),
),
));
// Namespace: States
@include _color((
state: (
danger: (
background-color: _color(red, 200),
border-color: _color(red, 500),
color: _color(red, 800)
),
error: (
background-color: _color(red, 200),
border-color: _color(red, 500),
color: _color(red, 800)
),
info: (
background-color: _color(blue, 200),
border-color: _color(blue, 500),
color: _color(blue, 800)
),
success: (
background-color: _color(green, 200),
border-color: _color(green, 500),
color: _color(green, 800)
),
warning: (
background-color: _color(yellow, 200),
border-color: _color(yellow, 500),
color: _color(yellow, 800)
),
),
));