ds2-core/src/pg/core/_colour-samples.pug

//- 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<rgb.length; i++) {
-			if (rgb[i] <= 0.03928) {
-				rgb[i] = rgb[i] / 12.92;	
-			} else {
-				rgb[i] = Math.pow( ((rgb[i]+0.055)/1.055), 2.4 );
-			}
-		}
-		let l = (0.2126 * rgb[0]) + (0.7152 * rgb[1]) + (0.0722 * rgb[2]);
-		return l;
-	};
-		function getContrastRatio (f, b) {
-			f = splitrgba(f);
-			b = splitrgba(b);
-			let ratio = 1;
-			let fl = getLuminance([f.r/255, f.g/255, f.b/255]);
-			let bl = getLuminance([b.r/255, b.g/255, b.b/255]);
-
-			if (fl >= 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 ) &#x2713;
			- } else { 
				span &#x2717; 
			- } if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 3)  {
				span(style="color: " + c ) &#x2713;
			- } else {
				span &#x2717;
			- }
		div.accwaa.result
			- if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 4.5) {
				span(style="color: " + c ) &#x2713; 
			- } else { 
				span &#x2717; 
			- } if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 3)  {
				span(style="color: " + c ) &#x2713;
			- } else {
				span &#x2717;
			- }
		div.aaa WCAG 2.0 AAA 
		div.accbaaa.result
			- if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 7) {
				span(style="color: " + c ) &#x2713; 
			- } else { 
				span &#x2717; 
			- } if (getContrastRatio(color(c, "rgb"), "rgb(0,0,0)") >= 4.5)  {
				span(style="color: " + c ) &#x2713;
			- } else {
				span &#x2717;
			- }
		div.accwaaa.result
			- if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 7) {
				span(style="color: " + c ) &#x2713; 
			- } else { 
				span &#x2717; 
			- } if (getContrastRatio(color(c, "rgb"), "rgb(255,255,255)") >= 4.5)  {
				span(style="color: " + c ) &#x2713;
			- } else {
				span &#x2717;
			- }



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}"