Ability to output a color value from a variable

[willemdewit]

It would be nice if the sassdoc detected that a color is being used as a value of a variable. It should then output a tile with the configured color.

/**
 * The theme color used for creating a color range.
 * @type color
 */
$theme-color: rgb(85,128,182) !default;

[KittyGiraudel]

I'll tackle this for SassDoc 2.1. Thanks for suggesting.

[ben-eb]

👍

Perhaps it could look something like this?

[KittyGiraudel]

You, sir, are clever. I like it.

[KittyGiraudel]

@function luminance($color) {
  $rgb: red($color), green($color), blue($color);
  $rgba: ();

  @each $channel in $rgba {
    $channel: $channel / 255;
    $channel: if($channel < .03928, $channel / 12.92, pow(($channel + .055) / 1.055, 2.4));
    $rgba: append($rgba, $channel);
  }

  @return .2126 * nth($rgba, 1) + .7152 * nth($rgba, 2) + 0.0722 * nth($rgba, 3);
}

[ben-eb]

I think we need something in JS rather than SCSS for this, given that I was just outputting the colour inline into a span element. Perhaps a swig filter that could calculate an appropriate background value?

[KittyGiraudel]

Agreed.

[ben-eb]

👍

OK, can do that. Which do you prefer; the background colour of the value being the hex colour, or the text colour itself being the hex colour?

[KittyGiraudel]

I think the text color being the color itself would be good. Accurate workflow would be to compute the luminance of a color (with a Swig filter), and if it's higher than 0.8, print a dark background (something like #333).

{% if (prop.type|lower).indexOf('color') !== -1 and prop.default %}
  <code
    style="color: {{ prop.default }};"
    {% if prop.default|luminance > .8 %}class="dark"{% endif %}
  >{{ prop.default }}</code>
{% else %}
  <code>{{ prop.default }}</code>
{% endif %}

Might need adjustments.

[ben-eb]

My idea was to run the value through the YIQ algorithm and then just have #000 or #fff as the background colour; it gives the best contrast for the text. Classes might be better though, what do you think?

<code style="background:{{ prop.default | yiq }}; color: {{ prop.default }}">
    {{ prop.default }}
</code>

[KittyGiraudel]

Anyway, you have to make sure it is a color. But that sounds good however.

Le Jeu 1 Jan 2015 12:55, Ben Briggs notifications@github.com a écrit :

My idea was to run the value through the YIQ algorithm and then just have
#000 or #fff as the background colour; it gives the best contrast for the
text. Classes might be better though, what do you think?

{{ prop.default }}

—
Reply to this email directly or view it on GitHub
#28 (comment)
.

[ben-eb]

Awesome. 😃

[willemvb]

Would this work for Colors in a map as well?

/// Orange tints
/// @group Colors
/// @type Map
/// @prop {String} key - tint name
/// @prop {Color} value - color
$orange: (
  lightest: #ffe5ca,
  lighter: #f5b180,
  light: #e77636,
  default: #e13400,
  dark: #711f03,
  darker: #581902,
  darkest: #391102,
);

[KittyGiraudel]

Sure. :)

[willemvb]

Should it work in 2.1.1? I'm only seeing map values in my output, and no swatches.
No idea what I'm doing wrong. Any help is appreciated!

[KittyGiraudel]

Color previews are not displayed in the code block but in the property table. You might want to change your doc as follow:

/// Orange tints
/// @group Colors
/// @type Map
/// @prop {Color} lightest [#ffe5ca]
/// @prop {Color} lighter [#f5b180]
/// @prop {Color} light [#e77636]
/// @prop {Color} default [#e13400]
/// @prop {Color} dark [#711f03]
/// @prop {Color} darker [#581902]
/// @prop {Color} darkest [#391102]
$orange: (
  lightest: #ffe5ca,
  lighter: #f5b180,
  light: #e77636,
  default: #e13400,
  dark: #711f03,
  darker: #581902,
  darkest: #391102,
);

[willemvb]

Nice! Thanks a lot.
Could it be a good idea to automate this prop-rendering by using something like @type ColorMap?
I might have to teach myself this Swig template language :)

[willemdewit]

Thank you for this awesome feature!

Is a reference to another color value also going to be supported?

[KittyGiraudel]

I suppose we could do something like this. Right @FWeinb?

[FWeinb]

This should in fact be possible. We might need to add some helper methods to SassDoc-extras to generate a variable-value map and than use that to get the color. This implies that the used variable is in fact documented using SassDoc.

[mdix]

Hi,

as long as it's not implemented you can do the following:

/// <div style="background-color: #d73219; width: 200px; height: 200px"></div>
$color-red1: #d73219;

which results in:

Anyways, +1 for adding this feature.

Cheers
Marc

[KittyGiraudel]

It has been implemented.