gamv/ds2-core
1
0
Fork 0
Code Issues 13 Releases 8 Activity
ds2-core/src/pg/core/_colour-samples.pug
A McIlwraith (M2) ef9b937d2e More updates
2024-07-12 23:35:29 -04:00

250 lines
8.4 KiB
Plaintext
Raw Blame History

//- 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}"
Reference in New Issue View Git Blame Copy Permalink