@ithaka/bonsai/documentation/colors.js

ITHAKA core styling

import colorTemplate from "../documentation/fixtures/color.html";
import Handlebars from "handlebars";

const colors = {
    palette: {
        alert: {
            name: "Alert",
            hex: "#dc2a2a",
            sass: "$bonsai-alert"
        },
        warning: {
            name: "Warning",
            hex: "#ffefc2",
            sass: "$bonsai-warning"
        },
        success: {
            name: "Success",
            hex: "#e2eed7",
            sass: "$bonsai-success"
        },
        information: {
            name: "Information",
            hex: "#b4e5f9",
            sass: "$bonsai-information"
        },
        secondary: {
            name: "Secondary",
            hex: "#ffffff",
            sass: "$bonsai-secondary"
        },
        primary: {
            name: "Primary",
            hex: "#006179",
            sass: "$bonsai-primary"
        }
    },
    secondary: {
        disabledText: {
            name: "Disabled Text",
            hex: "#4b5555",
            sass: "$bonsai-disabled-text"
        },
        active: {
            name: "Active",
            hex: "#005266",
            sass: "$bonsai-active"
        },
        hoverBackground: {
            name: "Hover Background",
            hex: "#d9e7eb",
            sass: "$bonsai-hover-background"
        },
        hover: {
            name: "Hover / Focus / Hover Border",
            hex: "#1291ae",
            sass: "$bonsai-hover, $bonsai-focus, $bonsai-hover-border"
        }
    },
    all: {
        darkGreen: {
            name: "Dark Green",
            hex: "#538329",
            sass: "$bonsai-dark-green"
        },
        yellowGreen: {
            name: "Yellow Green",
            hex: "#6eb032",
            sass: "$bonsai-yellow-green"
        },
        lightGreen: {
            name: "Light Green",
            hex: "#e2eed7",
            sass: "$bonsai-light-green"
        },
        red: {
            name: "Red",
            hex: "#dc2a2a",
            sass: "$bonsai-red"
        },
        maroon: {
            name: "Maroon",
            hex: "#900",
            sass: "$bonsai-maroon"
        },
        lightYellow: {
            name: "Light Yellow",
            hex: "#ffefc2",
            sass: "$bonsai-light-yellow"
        },
        darkPurple: {
            name: "Dark Purple",
            hex: "#646779",
            sass: "$bonsai-dark-purple"
        },
        veryDarkBlue: {
            name: "Very Dark Blue",
            hex: "#005266",
            sass: "$bonsai-very-dark-blue"
        },
        blueGray: {
            name: "Blue Gray",
            hex: "#d9e7eb",
            sass: "$bonsai-blue-gray"
        },
        lightBlue: {
            name: "Light Blue",
            hex: "#b4e5f9",
            sass: "$bonsai-light-blue"
        },
        blue: {
            name: "Blue",
            hex: "#1291ae",
            sass: "$bonsai-blue"
        },
        darkBlue: {
            name: "Dark Blue",
            hex: "#006179",
            sass: "$bonsai-dark-blue"
        }
    },
    gray: {
        black: {
            name: "Black",
            hex: "#333333",
            sass: "$bonsai-black"
        },
        veryDarkGray: {
            name: "Very Dark Gray",
            hex: "#4b5555",
            sass: "$bonsai-very-dark-gray"
        },
        darkGray: {
            name: "Dark Gray",
            hex: "#696969",
            sass: "$bonsai-dark-gray"
        },
        mediumGray: {
            name: "Medium Gray",
            hex: "#9b9b9b",
            sass: "$bonsai-medium-gray"
        },
        lightGray: {
            name: "Light Gray",
            hex: "#cccccc",
            sass: "$bonsai-light-gray"
        },
        veryLightGray: {
            name: "Very Light Gray",
            hex: "#e8e8e8",
            sass: "$bonsai-very-light-gray"
        },
        veryLightBlueGray: {
            name: "Very Light Blue Gray",
            hex: "#f6f9fc",
            sass: "$bonsai-very-light-blue-gray"
        },
        white: {
            name: "White",
            hex: "#ffffff",
            sass: "$bonsai-white"
        }
    },
    social: {
        facebookBlue: {
            name: "Facebook Blue",
            hex: "#4267b2",
            sass: "$bonsai-facebook-blue"
        },
        twitterBlue: {
            name: "Twitter Blue",
            hex: "#1b95e0",
            sass: "$bonsai-twitter-blue"
        },
        tumblrBlue: {
            name: "Tumblr Blue",
            hex: "#36465b",
            sass: "$bonsai-tumblr-blue"
        }
    }
};

String.prototype.camelToDashed = function(){
    return this.replace(/([a-z])([A-Z])/g, "$1-$2").toLowerCase();
};

function makeColors(headingID, paletteType) {
    const heading = document.getElementById(headingID),
        colorHandlebarsTemplate = Handlebars.compile(colorTemplate);
    for (let color in colors[paletteType]) {
        heading
            .insertAdjacentHTML("afterend",
                colorHandlebarsTemplate({
                    COLOR: color.camelToDashed(),
                    NAME: colors[paletteType][color].name,
                    HEX :colors[paletteType][color].hex,
                    SASS: colors[paletteType][color].sass
                })
            );
    }
}

if (document.getElementById("colors").classList.contains("active")) {
    makeColors("insert-primary-colors", "palette");
    makeColors("insert-secondary-colors", "secondary");
    makeColors("insert-all-colors", "all");
    makeColors("insert-gray-colors", "gray");
    makeColors("insert-social-sharing-colors", "social");
}