chroma icon indicating copy to clipboard operation
chroma copied to clipboard

Manage color variations

Open JohnAlbin opened this issue 9 years ago • 1 comments

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(),
));

JohnAlbin avatar Mar 04 '15 22:03 JohnAlbin

Lots of moving parts in this feature request, so I'm splitting this feature into 2 parts:

  1. Ability to use functions in colors defined with add-colors().
  2. Ability to manage functions as "variations" and call variations from color().

Number 1 was just added to Chroma 1.1.0.

JohnAlbin avatar Sep 23 '15 06:09 JohnAlbin