//- sample color-samples array. You can call it anything, you'll just substitute the //- appropriate array name and id in the mixin call. //- //- The mixin call is //- +color-samples([color array], [id]) //- //- This will generate two cards: Blue and OJ. Note that as this functions on a loop, the //- order of colors in the array and the colors in the dark and light shades matters. //- //- var colors = [ //- { name: "Blue", //- color: "rgb( 46, 81, 161)", //- grad:{ //- d: [ //- { n: "blue-d", c: "rgb( 19, 49,118)", d:""}, //- { n: "blue-xd", c: "rgb( 3, 18, 53)", d:""}, //- ], //- l: [ //- { n: "blue-l", c: "rgb( 92,122,191)", d:""}, //- { n: "blue-xl", c: "rgb(178,195,236)", d:""}, //- ] //- }, //- note: "This is my primary color." //- }, //- { name: "OJ", //- color: "rgb(240, 176, 49)", //- grad:{ //- d: [ //- { n: "oj-d", c: "rgb(203,137, 6)", d: "Dark" }, //- { n: "oj-xd", c: "rgb(157,105, 0)", d: "Darker" }, //- ], //- l: [ //- { n: "oj-l", c: "rgb(255,204,103)", d: "Light" }, //- { n: "oj-xl", c: "rgb(255,228,173)", d: "Lighter" }, //- ] //- }, //- }, //- //- ... //- //- ] - function splitrgba (c) { - c = c.substring(c.indexOf("(")+1,c.indexOf(")")).split(","); - for (let i = 0; i < c.length; i++) { - c[i] = c[i].trim(); - } - let a = (c.length == 3 ? 1 : c[4]) - return { "rgb": [c[0],c[1],c[2],a.toString()], "r": c[0], "g": c[1], "b": c[2], "a": a.toString()} - } - function getLuminance (rgb) { - for (let i =0; i= bl) { - ratio = (fl + .05) / (bl + .05); - } else { - ratio = (bl + .05) / (fl + .05); - } - - return Math.round(ratio * 10) / 10; - - } - - function rgb2hex (c) { - c = splitrgba(c); - c.r = ( Number( c.r ) ).toString(16); - c.g = ( Number( c.g ) ).toString(16); - c.b = ( Number( c.b ) ).toString(16); - return "#"+ (c.r.length===1 ? "0" : "") + c.r + (c.g.length===1 ? "0" : "") + c.g + (c.b.length===1 ? "0" : "") + c.b ; - }; - - function hex2rgb (h) { - if (h.length == 3 || h.length == 4) { - h = h.replace(/#([A-Za-z0-9])([A-Za-z0-9])([A-Za-z0-9])/,"#$1$1$2$2$3$3") - } - return "rgb(" + parseInt(((h.charAt(0) == "#") ? h.substring(1, 7) : h).substring(0, 2), 16) + ", " + parseInt(((h.charAt(0) == "#") ? h.substring(1, 7) : h).substring(2, 4), 16) + ", " + parseInt(((h.charAt(0) == "#") ? h.substring(1, 7) : h).substring(4, 6), 16) + ")"; - }; - - function color (c, t) { - if ((t == "hex" && c[0] == "#") || (t == "rgb" && c.substring(0,3) == "rgb")) { - return c; - } else if (t = "hex" && c.substring(0,3) == "rgb") { - return rgb2hex(c); - } else if (t = "rgb" && c[0] == "#") { - return hex2rgb(c); - } else { - return false; - } - } - - String.prototype.toTitleCase = function() { - return this.replace(/\w\S*/g, function(txt) { - return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase(); - }); - } - function generateSCSS(c, p) { - let o = ""; - for (let i = 0; i < c.length; i++) { - o += `\n\t${p}-${c[i].name.toLowerCase()}: ${ color(c[i].color, "hex").toLowerCase() },\n`; - for (let ii = 0; ii < c[i].grad.l.length; ii++) { - o += `\t${p}-${c[i].grad.l[ii].n.toLowerCase()}: ${ color(c[i].grad.l[ii].c, "hex").toLowerCase() },\n`; - } - for (let ii = 0; ii < c[i].grad.d.length; ii++) { - o += `\t${p}-${c[i].grad.d[ii].n.toLowerCase()}: ${ color(c[i].grad.d[ii].c, "hex").toLowerCase() },\n`; - } - } - return o; - } - function generateCSS(c, p) { - let o = ""; - for (let i = 0; i < c.length; i++) { - o += `\n\t--${p}-${c[i].name.toLowerCase()}: ${ color(c[i].color, "hex").toLowerCase() },\n`; - for (let ii = 0; ii < c[i].grad.l.length; ii++) { - o += `\t--${p}-${c[i].grad.l[ii].n.toLowerCase()}: ${ color(c[i].grad.l[ii].c, "hex").toLowerCase() },\n`; - } - for (let ii = 0; ii < c[i].grad.d.length; ii++) { - o += `\t--${p}-${c[i].grad.d[ii].n.toLowerCase()}: ${ color(c[i].grad.d[ii].c, "hex").toLowerCase() },\n`; - } - } - return o; - } mixin accessibility-info(c) div.acchb span color & black small= getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") + ":1" div.acchw span color & white small= getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") + ":1" div.aa WCAG 2.0 AA div.accbaa.result - if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 4.5) { span(style="color: " + c ) ✓ - } else { span ✗ - } if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 3) { span(style="color: " + c ) ✓ - } else { span ✗ - } div.accwaa.result - if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 4.5) { span(style="color: " + c ) ✓ - } else { span ✗ - } if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 3) { span(style="color: " + c ) ✓ - } else { span ✗ - } div.aaa WCAG 2.0 AAA div.accbaaa.result - if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 7) { span(style="color: " + c ) ✓ - } else { span ✗ - } if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 4.5) { span(style="color: " + c ) ✓ - } else { span ✗ - } div.accwaaa.result - if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 7) { span(style="color: " + c ) ✓ - } else { span ✗ - } if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 4.5) { span(style="color: " + c ) ✓ - } else { span ✗ - } mixin colour-samples(colors, theid) color-samples - let css = []; - let scss = []; - for (var i = 0; i < colors.length; ++i) { - let fgcolor = ( getContrastRatio(color(colors[i].color, "rgb"), "rgb(0,0,0)") <= 4.5 ? "#FFF" : "#000" ); color-sample( data-color= colors[i].color style="background-color: "+ colors[i].color + "; color: " + fgcolor) name(data-hex= color(colors[i].color, "hex") data-rgb= color(colors[i].color, "rgb") data-token= "--" + colorpfx + "-" + colors[i].name.toLowerCase() ) span= colors[i].name.toTitleCase() hex= color(colors[i].color, "hex") rgb= color(colors[i].color, "rgb").replace(/\s+/g, "") accessibility +accessibility-info(colors[i].color) - if (colors[i].grad.l.length > 0 || colors[i].grad.d.length > 0 ) { sample-block - for ( var ii = 0; ii < colors[i].grad.l.length; ++ii ) { color-pill(data-hex= color( colors[i].grad.l[ii].c, "hex") data-rgb= color(colors[i].grad.l[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.l[ii].n) span(style="background-color: " + colors[i].grad.l[ii].c ) div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom") +accessibility-info(color(colors[i].grad.l[ii].c, "rgb")) if colors[i].grad.l[ii].d span #{colors[i].grad.l[ii].d} else span #{colors[i].grad.l[ii].n} - } sample-block - for ( var ii = 0; ii < colors[i].grad.d.length; ++ii ) { color-pill(data-hex= color(colors[i].grad.d[ii].c, "hex") data-rgb= color(colors[i].grad.d[ii].c, "rgb") data-token= "--" + colorpfx + "-" + colors[i].grad.d[ii].n) span(style="background-color: " + colors[i].grad.d[ii].c ) div.tooltip-tc.color-accessibility(role="tooltip" inert tip-position="bottom") +accessibility-info(color(colors[i].grad.d[ii].c, "rgb")) if colors[i].grad.d[ii].d span #{colors[i].grad.d[ii].d} else span #{colors[i].grad.d[ii].n} - } - } if colors[i].note notes= colors[i].note - } div.tab-group(id= theid ) - csstab = csstab == undefined ? "css" : csstab - scsstab = scsstab == undefined ? "scss" : scsstab div(data-tab= csstab ) pre.language-css= ":root {" + generateCSS(colors, colorpfx) + "}" //- pre.language-css= cssStr div(data-tab= scsstab ) pre.language-css= "$" + colorpfx + ": (" + generateSCSS(colors, colorpfx) + ");\n:root {\n\t@each $name, $color in $" + colorpfx + " {\n\t\t--#{$name}: #{$color};\n\t}\n}"