chroma
chroma copied to clipboard
Manage color variations
Just making a note that ~~some~~ many people like to manage color variations. I'm not there yet, but here's a few articles about that.
- Map of variations:
- http://www.sitepoint.com/managing-color-values-with-sass/
- http://www.sitepoint.com/using-sass-build-color-palettes/
- Nested colors:
- https://bugsnag.com/blog/sass-color-palettes (Though this one could be thought of as schemes and colors)
- https://medium.com/@ryanhavoc/clean-colour-management-with-sass-4d5e9bb4f1b2
- http://erskinedesign.com/blog/friendlier-colour-names-sass-maps/#solving-issue-1-the-naming-of-things
Also, Scott and Mason have a Sass lib that focuses on creating variations. https://github.com/at-import/color-schemer
A map of variations looks very promising: http://www.sitepoint.com/managing-color-values-with-sass/
$chroma: add-color-variations((
light: (
function: lighten,
parameters: 15%,
// Optional tags to group color variations together.
tags: (standard),
),
shade: (
function: mix,
parameters: white 80%
tags: (standard, alternate),
),
));
// A variation can be retrieved on the fly with color().
// Assuming the "primary" color has been added to chroma.
.rule { color: color(primary, shade); }
$chroma: add-colors((
link: 'blue',
link-visited: ('blue', shade),
));
It relies on the fact that the color is always the first parameter to Sass functions. http://sass-lang.com/documentation/Sass/Script/Functions.html#rgb_functions
Integration with Color Schemer would be trivial since its functions all follow the color-as-first-parameter convention. And scheme generation could be used with:
// First set various $cs-* variables. Then:
$chroma: add-colors((
primary: cs-primary(),
secondary: cs-secondary(),
tertiary: cs-tertiary(),
quadrary: cs-quadrary(),
));
Lots of moving parts in this feature request, so I'm splitting this feature into 2 parts:
- Ability to use functions in colors defined with
add-colors()
. - Ability to manage functions as "variations" and call variations from
color()
.
Number 1 was just added to Chroma 1.1.0.