Closed willemdewit closed 9 years ago
I'll tackle this for SassDoc 2.1. Thanks for suggesting.
:+1:
Perhaps it could look something like this?
You, sir, are clever. I like it.
@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);
}
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?
Agreed.
:+1:
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?
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.
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>
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 https://github.com/SassDoc/sassdoc-theme-default/issues/28#issuecomment-68485123 .
Awesome. :smiley:
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,
);
Sure. :)
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!
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,
);
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 :)
Thank you for this awesome feature!
Is a reference to another color value also going to be supported?
I suppose we could do something like this. Right @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.
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
It has been implemented.
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.