@picocss/pico
Version:
Graceful & Minimal CSS design system in pure semantic HTML
528 lines (484 loc) • 14.5 kB
JavaScript
/*!
* Color Picker
*
* Pico.css - https://picocss.com
* Copyright 2019 - Licensed under MIT
*/
(function() {
/**
* Config
*/
var colors = {
target: '#customization h5', // Buttons inserted after target
selectorButton: '#customization button[data-color]', // Button selector in Dom
selectorTheme: '#customization', // Theme selector in Dom
styles: '',
// Source: https://material.io/design/color/the-color-system.html
system: {
"red": {
"50": "#ffebee",
"100": "#ffcdd2",
"200": "#ef9a9a",
"300": "#e57373",
"400": "#ef5350",
"500": "#f44336",
"600": "#e53935",
"700": "#d32f2f",
"800": "#c62828",
"900": "#b71c1c",
"a100": "#ff8a80",
"a200": "#ff5252",
"a400": "#ff1744",
"a700": "#d50000",
"inverse": "#FFF"
},
"pink": {
"50": "#fce4ec",
"100": "#f8bbd0",
"200": "#f48fb1",
"300": "#f06292",
"400": "#ec407a",
"500": "#e91e63",
"600": "#d81b60",
"700": "#c2185b",
"800": "#ad1457",
"900": "#880e4f",
"a100": "#ff80ab",
"a200": "#ff4081",
"a400": "#f50057",
"a700": "#c51162",
"inverse": "#FFF"
},
"purple": {
"50": "#f3e5f5",
"100": "#e1bee7",
"200": "#ce93d8",
"300": "#ba68c8",
"400": "#ab47bc",
"500": "#9c27b0",
"600": "#8e24aa",
"700": "#7b1fa2",
"800": "#6a1b9a",
"900": "#4a148c",
"a100": "#ea80fc",
"a200": "#e040fb",
"a400": "#d500f9",
"a700": "#aa00ff",
"inverse": "#FFF"
},
"deep-purple": {
"50": "#ede7f6",
"100": "#d1c4e9",
"200": "#b39ddb",
"300": "#9575cd",
"400": "#7e57c2",
"500": "#673ab7",
"600": "#5e35b1",
"700": "#512da8",
"800": "#4527a0",
"900": "#311b92",
"a100": "#b388ff",
"a200": "#7c4dff",
"a400": "#651fff",
"a700": "#6200ea",
"inverse": "#FFF"
},
"indigo": {
"50": "#e8eaf6",
"100": "#c5cae9",
"200": "#9fa8da",
"300": "#7986cb",
"400": "#5c6bc0",
"500": "#3f51b5",
"600": "#3949ab",
"700": "#303f9f",
"800": "#283593",
"900": "#1a237e",
"a100": "#8c9eff",
"a200": "#536dfe",
"a400": "#3d5afe",
"a700": "#304ffe",
"inverse": "#FFF"
},
"blue": {
"50": "#e3f2fd",
"100": "#bbdefb",
"200": "#90caf9",
"300": "#64b5f6",
"400": "#42a5f5",
"500": "#2196f3",
"600": "#1e88e5",
"700": "#1976d2",
"800": "#1565c0",
"900": "#0d47a1",
"a100": "#82b1ff",
"a200": "#448aff",
"a400": "#2979ff",
"a700": "#2962ff",
"inverse": "#FFF"
},
"light-blue": {
"50": "#e1f5fe",
"100": "#b3e5fc",
"200": "#81d4fa",
"300": "#4fc3f7",
"400": "#29b6f6",
"500": "#03a9f4",
"600": "#039be5",
"700": "#0288d1",
"800": "#0277bd",
"900": "#01579b",
"a100": "#80d8ff",
"a200": "#40c4ff",
"a400": "#00b0ff",
"a700": "#0091ea",
"inverse": "#FFF"
},
"cyan": {
"50": "#e0f7fa",
"100": "#b2ebf2",
"200": "#80deea",
"300": "#4dd0e1",
"400": "#26c6da",
"500": "#00bcd4",
"600": "#00acc1",
"700": "#0097a7",
"800": "#00838f",
"900": "#006064",
"a100": "#84ffff",
"a200": "#18ffff",
"a400": "#00e5ff",
"a700": "#00b8d4",
"inverse": "#FFF"
},
"teal": {
"50": "#e0f2f1",
"100": "#b2dfdb",
"200": "#80cbc4",
"300": "#4db6ac",
"400": "#26a69a",
"500": "#009688",
"600": "#00897b",
"700": "#00796b",
"800": "#00695c",
"900": "#004d40",
"a100": "#a7ffeb",
"a200": "#64ffda",
"a400": "#1de9b6",
"a700": "#00bfa5",
"inverse": "#FFF"
},
"green": {
"50": "#e8f5e9",
"100": "#c8e6c9",
"200": "#a5d6a7",
"300": "#81c784",
"400": "#66bb6a",
"500": "#4caf50",
"600": "#43a047",
"700": "#388e3c",
"800": "#2e7d32",
"900": "#1b5e20",
"a100": "#b9f6ca",
"a200": "#69f0ae",
"a400": "#00e676",
"a700": "#00c853",
"inverse": "#FFF"
},
"light-green": {
"50": "#f1f8e9",
"100": "#dcedc8",
"200": "#c5e1a5",
"300": "#aed581",
"400": "#9ccc65",
"500": "#8bc34a",
"600": "#7cb342",
"700": "#689f38",
"800": "#558b2f",
"900": "#33691e",
"a100": "#ccff90",
"a200": "#b2ff59",
"a400": "#76ff03",
"a700": "#64dd17",
"inverse": "#FFF"
},
"lime": {
"50": "#f9fbe7",
"100": "#f0f4c3",
"200": "#e6ee9c",
"300": "#dce775",
"400": "#d4e157",
"500": "#cddc39",
"600": "#c0ca33",
"700": "#afb42b",
"800": "#9e9d24",
"900": "#827717",
"a100": "#f4ff81",
"a200": "#eeff41",
"a400": "#c6ff00",
"a700": "#aeea00",
"inverse": "#000"
},
"yellow": {
"50": "#fffde7",
"100": "#fff9c4",
"200": "#fff59d",
"300": "#fff176",
"400": "#ffee58",
"500": "#ffeb3b",
"600": "#fdd835",
"700": "#fbc02d",
"800": "#f9a825",
"900": "#f57f17",
"a100": "#ffff8d",
"a200": "#ffff00",
"a400": "#ffea00",
"a700": "#ffd600",
"inverse": "#000"
},
"amber": {
"50": "#fff8e1",
"100": "#ffecb3",
"200": "#ffe082",
"300": "#ffd54f",
"400": "#ffca28",
"500": "#ffc107",
"600": "#ffb300",
"700": "#ffa000",
"800": "#ff8f00",
"900": "#ff6f00",
"a100": "#ffe57f",
"a200": "#ffd740",
"a400": "#ffc400",
"a700": "#ffab00",
"inverse": "#000"
},
"orange": {
"50": "#fff3e0",
"100": "#ffe0b2",
"200": "#ffcc80",
"300": "#ffb74d",
"400": "#ffa726",
"500": "#ff9800",
"600": "#fb8c00",
"700": "#f57c00",
"800": "#ef6c00",
"900": "#e65100",
"a100": "#ffd180",
"a200": "#ffab40",
"a400": "#ff9100",
"a700": "#ff6d00",
"inverse": "#FFF"
},
"deep-orange": {
"50": "#fbe9e7",
"100": "#ffccbc",
"200": "#ffab91",
"300": "#ff8a65",
"400": "#ff7043",
"500": "#ff5722",
"600": "#f4511e",
"700": "#e64a19",
"800": "#d84315",
"900": "#bf360c",
"a100": "#ff9e80",
"a200": "#ff6e40",
"a400": "#ff3d00",
"a700": "#dd2c00",
"inverse": "#FFF"
},
/*"brown": {
"50": "#efebe9",
"100": "#d7ccc8",
"200": "#bcaaa4",
"300": "#a1887f",
"400": "#8d6e63",
"500": "#795548",
"600": "#6d4c41",
"700": "#5d4037",
"800": "#4e342e",
"900": "#3e2723",
"inverse": "#FFF"
},*/
"grey": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#eeeeee",
"300": "#e0e0e0",
"400": "#bdbdbd",
"500": "#9e9e9e",
"600": "#757575",
"700": "#616161",
"800": "#424242",
"900": "#212121",
"inverse": "#FFF"
},
"blue-grey": {
"50": "#eceff1",
"100": "#cfd8dc",
"200": "#b0bec5",
"300": "#90a4ae",
"400": "#78909c",
"500": "#607d8b",
"600": "#546e7a",
"700": "#455a64",
"800": "#37474f",
"900": "#263238",
"inverse": "#FFF"
}
}
}
/**
* Init
*/
generateButtons(colors.system);
pickColor('pink', colors.system['pink']);
/**
* Generate Buttons
*
* @param {object} data
*/
function generateButtons(data) {
// Vars
var colorButtons = '';
// Colors
for (var color in data) {
if (data.hasOwnProperty(color)) {
// Buttons
colorButtons += '<button data-color="'+ color +'" aria-label="Activate '+ color +' theme"></button>';
// CSS Styles
colors.styles += 'button[data-color="'+ color +'"] {'
+ 'background-color: '+ data[color]['600'] +'; '
+ '}'
+ '[data-theme="light"] button[data-color="'+ color +'"]:hover, '
+ '[data-theme="light"] button[data-color="'+ color +'"]:active, '
+ '[data-theme="light"] button[data-color="'+ color +'"]:focus {'
+ 'background-color: '+ data[color]['700'] +'; '
+ '}'
+ '[data-theme="dark"] button[data-color="'+ color +'"]:hover, '
+ '[data-theme="dark"] button[data-color="'+ color +'"]:active, '
+ '[data-theme="dark"] button[data-color="'+ color +'"]:focus {'
+ 'background-color: '+ data[color]['500'] +'; '
+ '}'
}
}
// Insert buttons
var buttons = document.createElement('FIGURE');
buttons.innerHTML = colorButtons;
document.querySelector(colors.target).after(buttons);
// Buttons listeners
var buttonsAll = document.querySelectorAll(colors.selectorButton);
for (var i = 0; i < buttonsAll.length; i++) {
buttonsAll[i].addEventListener('click', function(event) {
buttonColor = event.target.getAttribute('data-color');
pickColor(buttonColor, data[buttonColor]);
}, false);
}
// Insert CSS Styles
var styles = document.createElement('STYLE');
styles.setAttribute('title', 'color-picker');
styles.innerHTML = colors.styles;
document.querySelector('head').appendChild(styles);
}
/**
* Pick Color
*
* @param {string} name
* @param {object} data
*/
function pickColor(name, data) {
// Generate theme
generateTheme(name, data);
// Clear picked state
var buttonsAll = document.querySelectorAll(colors.selectorButton);
for (var i = 0; i < buttonsAll.length; i++) {
buttonsAll[i].removeAttribute("class");
}
// Set Picked state
var buttonPicked = document.querySelector(colors.selectorButton + '[data-color="' + name + '"]');
buttonPicked.setAttribute('class', 'picked');
}
/**
* Generate theme
*
* @param {string} name
* @param {object} data
*/
function generateTheme(name, data) {
// Code and Color name
// TODO: Create a function
var cName = document.querySelectorAll(colors.selectorTheme + ' .name');
for (var i = 0; i < cName.length; ++i) {
cName[i].innerHTML = name.charAt(0).toUpperCase() + name.substring(1) + ' ';
}
var c500 = document.querySelectorAll(colors.selectorTheme + ' .c500');
for (var i = 0; i < c500.length; ++i) {
c500[i].innerHTML = data[500];
}
var c600 = document.querySelectorAll(colors.selectorTheme + ' .c600');
for (var i = 0; i < c600.length; ++i) {
c600[i].innerHTML = data[600];
}
var c700 = document.querySelectorAll(colors.selectorTheme + ' .c700');
for (var i = 0; i < c700.length; ++i) {
c700[i].innerHTML = data[700];
}
var c600OutlineLight = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-light');
for (var i = 0; i < c600OutlineLight.length; ++i) {
c600OutlineLight[i].innerHTML = hexToRgbA(data[600], .125);
}
var c600OutlineDark = document.querySelectorAll(colors.selectorTheme + ' .c600-outline-dark');
for (var i = 0; i < c600OutlineDark.length; ++i) {
c600OutlineDark[i].innerHTML = hexToRgbA(data[600], .25);
}
var inverse = document.querySelectorAll(colors.selectorTheme + ' .inverse');
for (var i = 0; i < inverse.length; ++i) {
inverse[i].innerHTML = data['inverse'];
}
// CSS Style
var generatedStyles = '[data-theme="generated"] {'
+ '--primary:' + data[600] + ';'
+ '--h4:' + data[700] + ';'
+ '--primary-hover:' + data[700] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .125) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}'
+ '@media only screen and (prefers-color-scheme: dark) {'
+ ':root:not([data-theme="light"]) [data-theme="generated"] {'
+ '--primary:' + data[600] + ';'
+ '--h4:' + data[400] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}'
+ '}'
+ '[data-theme="dark"] [data-theme="generated"] {'
+ '--primary:' + data[600] + ';'
+ '--h4:' + data[500] + ';'
+ '--primary-hover:' + data[500] + ';'
+ '--primary-focus:' + hexToRgbA(data[600], .25) + ';'
+ '--primary-inverse:' + data['inverse'] + ';'
+ '}';
// Insert CSS Styles
document.querySelector('style[title="color-picker"]').innerHTML = colors.styles + generatedStyles;
}
/**
* Hexadecimal to Rgba
*
* @param {string} hex
* @param {number} alpha
* @return {rgba}
*/
function hexToRgbA(hex, alpha) {
var c;
if(/^#([A-Fa-f0-9]{3}){1,2}$/.test(hex)) {
c= hex.substring(1).split('');
if(c.length== 3) {
c= [c[0], c[0], c[1], c[1], c[2], c[2]];
}
c= '0x' + c.join('');
return 'rgba(' + [(c>>16)&255, (c>>8)&255, c&255].join(',') + ',' + alpha + ')';
}
throw new Error('Bad Hex');
}
})();