Mibew/simple-icons
1
0
Fork 0
mirror of https://github.com/Mibew/simple-icons.git synced 2025-02-20 07:55:47 +03:00
Code Issues Actions Packages Projects Releases Wiki Activity

Contrast ratio proof of concept

Browse Source 
Initial implementation of making icons/text dark on a light background, as
suggested in issue #480. This implementation is based on the suggestion by
@pushrax, using the formula provided on
http://chilliant.blogspot.nl/2012/08/srgb-approximations-for-hlsl.html

Note that this implementation is not yet as desired, as it still darkens
some icons we might not want darkened and the dark color is currently full
black.

I also used this link in the process of making this:
http://springmeier.org/www/contrastcalculator/index.php
This commit is contained in:
Eric Cornelissen 2017-08-02 15:43:02 +02:00
parent 95e3588af9
commit 1376b5f255
1 changed files with 44 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

49
index.html
View File

@ -60,6 +60,32 @@
{% if rgbBlue < rgbMin %}
{% assign rgbMin = rgbBlue %}
{% endif %}
{% if rgbRed <= 0.03928 %}
{% assign lRed = rgbRed | divided_by: 12.92 | times: 0.2126 %}
{% else %}
{% assign lRed = rgbRed | times: 0.3053 | plus: 0.6822 | times: rgbRed | plus: 0.0125 | times: rgbRed | times: 0.2126 %}
{% endif %}
{% if rgbGreen <= 0.03928 %}
{% assign lGreen = rgbGreen | divided_by: 12.92 | times: 0.7152 %}
{% else %}
{% assign lGreen = rgbGreen | times: 0.3053 | plus: 0.6822 | times: rgbGreen | plus: 0.0125 | times: rgbGreen | times: 0.7152 %}
{% endif %}
{% if rgbBlue <= 0.03928 %}
{% assign lBlue = rgbBlue | divided_by: 12.92 | times: 0.0722 %}
{% else %}
{% assign lBlue = rgbBlue | times: 0.3053 | plus: 0.6822 | times: rgbBlue | plus: 0.0125 | times: rgbBlue | times: 0.0722 %}
{% endif %}
{% assign L = lRed | plus: lGreen | plus: lBlue %}
{% if L >= 0.6 %}
{% assign class = "dark" %}
{% else %}
{% assign class = "light" %}
{% endif %}
{% assign hslLuminance = rgbMax | plus: rgbMin | times: 50.0 %}
{% assign rgbDelta = rgbMax | minus: rgbMin %}
{% if rgbDelta == 0 %}
@ -84,10 +110,10 @@
{% endif %}
{% if hslSaturation < 10 %}
{% assign hslLuminance = hslLuminance | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% capture greyscaleIconsUnsortedString %}{{ greyscaleIconsUnsortedString }}{{ hslLuminance }},{{ filename }},{{ hslHue }},{{ hslSaturation }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% else %}
{% assign hslHue = hslHue | round: 0 | prepend: "000" | slice: -3, 3 %}
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% capture iconsUnsortedString %}{{ iconsUnsortedString }}{{ hslHue }},{{ hslSaturation }},{{ hslLuminance }},{{ filename }},{{ hex }},{{ title }},{{ class }},{{ L }}{% unless forloop.last %};{% endunless %}{% endcapture %}
{% endif %}
{% endfor %}
{% assign iconsArray = iconsUnsortedString | split: ";" %}
@ -158,9 +184,22 @@
width: 1.5rem;
}
path, rect, circle {
.grid-item.light path,
.grid-item.light rect,
.grid-item.light circle,
.grid-item.light h2,
.grid-item.light p {
color: #FFF;
fill: #FFF;
}
.grid-item.dark path,
.grid-item.dark rect,
.grid-item.dark circle,
.grid-item.dark h2,
.grid-item.dark p {
color: #000;
fill: #000;
}
#carbonads {
height: 100%;
@ -461,7 +500,7 @@
</li>
{% for icon in iconsArray %}
{% assign iconArray = icon | split: "," %}
<li class="grid-item" style="background-color: #{{ iconArray[4] }}">
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[3] }}.svg" download>
{% assign filePath = iconArray[3] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}
@ -472,7 +511,7 @@
{% endfor %}
{% for icon in greyscaleIconsArray %}
{% assign iconArray = icon | split: "," %}
<li class="grid-item" style="background-color: #{{ iconArray[4] }}">
<li class="grid-item {{ iconArray[6] }}" style="background-color: #{{ iconArray[4] }}">
<a class="grid-item__link" href="/icons/{{ iconArray[1] }}.svg" download>
{% assign filePath = iconArray[1] | prepend: "icons/" | append: ".svg" %}
{% include_relative {{ filePath }} %}