nclslbrn/flat-array.js

## flat-array.js
// Scrap Khroma palette
// https://www.khroma.co/generator

const componentToHex = (c) => {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

const rgbToHex = (r, g, b) =>  "#" + componentToHex(r)+componentToHex(g)+componentToHex(b);
const palettes = []

const scrap = () => {
    const palettesBlock = document.querySelectorAll('.color-pair.cp-palette')
    	palettesBlock.forEach(block => {
    		const panels = block.querySelectorAll('.poster-panel')
    		const i = parseInt(block.getAttribute('data-index'))
    		if (panels.length && panels !== undefined) {
    			const cols = Array.from(panels).map(p => {
    				const rgb = p.style.backgroundColor.replace('rgb(', '')
    		        	.replace(')', '')
    		        	.split(', ')
    		        	.map(val => parseInt(val))
                if (!isNaN(rgb[0])) {
                    return rgbToHex(...rgb)
                }
            })
            if (cols[0] !== undefined) {
                  palettes[i] = cols.join(';:')
            }
        }
    })
}
const getPalette = () => {
    	const out = Object.keys(palettes).map(i => palettes[i])
	console.log(JSON.stringify(out))
}


## index.html
<!--
Use to view object palette with main.js, style.css
and theme.js (the generated palette saved into a JS file
which exports palette as THEMES (import {THEMES} from './themes.js')
-->

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <title>Palette</title>
    <link rel="icon"
        href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎨</text></svg>">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="author" content="<%= authorName %>">
    <meta name="robots" content="all,follow">
    <meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1">
    <meta name="theme-color" content="#ffffff">
    <link href="./style.css" rel="stylesheet">
</head>

<body>
    <div id="app"></div>
    <script type="module" src="./themes.js"></script>
    <script type="module" src="./main.js"></script>
</body>
</html>

## main.js
import { THEMES } from './themes.js'

const div = ( className ) => {
    const elem = document.createElement('div')
    elem.classList.add(className)
    return elem
}

const colorBlock = (paletteName, palette) => {
    const block = div('colorBlock')
    const bgDiv = div('bg')
    bgDiv.style.backgroundColor = palette.bg
    bgDiv.style.color = palette.st
    bgDiv.innerHTML = `<h3>${paletteName}</h3>`

    const colors = div('fg')
    palette.fg.forEach(color => {
        const colDiv = div('color')
        colDiv.style.backgroundColor = color
        colors.appendChild(colDiv)
    })
    block.appendChild(bgDiv)
    block.appendChild(colors)
    return block
}

const app = document.getElementById('app')
const paletteList = Object.keys(THEMES)
paletteList.forEach(name =>
    app.appendChild(colorBlock(name, THEMES[name]))
)

## object.js
// Scrap Khroma palette
// https://www.khroma.co/generator

const componentToHex = (c) => {
  var hex = c.toString(16);
  return hex.length == 1 ? "0" + hex : hex;
}

const rgbToHex = (r, g, b) =>  "#" + componentToHex(r)+componentToHex(g)+componentToHex(b);

const shadeColor = (color, percent) => {

    let R = parseInt(color.substring(1,3),16);
    let G = parseInt(color.substring(3,5),16);
    let B = parseInt(color.substring(5,7),16);

    R = parseInt(R * (100 + percent) / 100);
    G = parseInt(G * (100 + percent) / 100);
    B = parseInt(B * (100 + percent) / 100);

    R = (R<255)?R:255;
    G = (G<255)?G:255;
    B = (B<255)?B:255;

    R = Math.round(R)
    G = Math.round(G)
    B = Math.round(B)

    const RR = ((R.toString(16).length==1)?"0"+R.toString(16):R.toString(16));
    const GG = ((G.toString(16).length==1)?"0"+G.toString(16):G.toString(16));
    const BB = ((B.toString(16).length==1)?"0"+B.toString(16):B.toString(16));

    return "#"+RR+GG+BB;
}

const scrap = () => {
	const palettesBlock = document.querySelectorAll('.color-pair.cp-palette')
	palettesBlock.forEach(block => {
		const panels = block.querySelectorAll('.poster-panel')
		const i = parseInt(block.getAttribute('data-index'))
		if (panels.length && panels !== undefined) {
			const fg = Array.from(panels).map(p => {
				const rgb = p.style.backgroundColor.replace('rgb(', '')
		        	.replace(')', '')
		        	.split(', ')
		        	.map(val => parseInt(val))
		        if (!isNaN(rgb[0])) {
		        	return rgbToHex(...rgb)
		        }
		    })
			if (fg[0] !== undefined) {
		    	  const bg = [fg[3], shadeColor(fg[3], -50)];
			  fg.splice(3, 0)
			  const st = shadeColor(fg[0], 50);
			  palettes[`No.${i+1}`] = { bg, fg, st };
			}
		}
	})
	const paletteKeys = Object.keys(palettes)
	console.log(`${paletteKeys.length} palettes scrapped`)
}
const log = () => {
	const paletteKeys = Object.keys(palettes)
	paletteKeys.forEach(name => {
		const logColor = {
			sign: palettes[name].fg.map(() => '%c  '),
			style: palettes[name].fg.map((col) => `background: ${col};`)
		}
		console.log(`Palette ${name}`)
		console.log('%c Background ', `background: ${palettes[name].bg};`)
		console.log('Foreground (fg)')
		console.log(logColor.sign.join(' '), ...logColor.style)
		console.log('%c Stroke ', `background: ${palettes[name].st};`)
	})

	console.log(JSON.stringify(palettes));
}


let palettes = {}

## style.css
body {
    box-sizing: border-box;
    font-family: system-ui,
             -apple-system, BlinkMacSystemFont,
             "Segoe UI",
             "Roboto",
             "Oxygen",
             "Ubuntu",
             "Cantarell",
             "Fira Sans",
             "Droid Sans",
             "Helvetica Neue",
             Arial, sans-serif;
}

body,
#app {
    margin: 0;
    padding: 0;
}

body {
    padding: 2em;
}

#app {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

.colorBlock {
    margin: 1em;
}

.colorBlock .bg {
    padding: 0.15em;
    text-align: center;
}

.colorBlock .fg {
    display: flex;
    flex-flow: row nowrap;
}

.colorBlock .fg .color {
    height: 2em;
    flex-basis: 25%;
}
	// Scrap Khroma palette
	// https://www.khroma.co/generator

	const componentToHex = (c) => {
	var hex = c.toString(16);
	return hex.length == 1 ? "0" + hex : hex;
	}

	const rgbToHex = (r, g, b) => "#" + componentToHex(r)+componentToHex(g)+componentToHex(b);
	const palettes = []

	const scrap = () => {
	const palettesBlock = document.querySelectorAll('.color-pair.cp-palette')
	palettesBlock.forEach(block => {
	const panels = block.querySelectorAll('.poster-panel')
	const i = parseInt(block.getAttribute('data-index'))
	if (panels.length && panels !== undefined) {
	const cols = Array.from(panels).map(p => {
	const rgb = p.style.backgroundColor.replace('rgb(', '')
	.replace(')', '')
	.split(', ')
	.map(val => parseInt(val))
	if (!isNaN(rgb[0])) {
	return rgbToHex(...rgb)
	}
	})
	if (cols[0] !== undefined) {
	palettes[i] = cols.join(';:')
	}
	}
	})
	}
	const getPalette = () => {
	const out = Object.keys(palettes).map(i => palettes[i])
	console.log(JSON.stringify(out))
	}
	<!--
	Use to view object palette with main.js, style.css
	and theme.js (the generated palette saved into a JS file
	which exports palette as THEMES (import {THEMES} from './themes.js')
	-->

	<!DOCTYPE html>
	<html lang="en">

	<head>
	<meta charset="UTF-8">
	<title>Palette</title>
	<link rel="icon"
	href="data:image/svg+xml,<svg xmlns=%22http://www.w3.org/2000/svg%22 viewBox=%220 0 100 100%22><text y=%22.9em%22 font-size=%2290%22>🎨</text></svg>">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="author" content="<%= authorName %>">
	<meta name="robots" content="all,follow">
	<meta name="viewport" content="width=device-width,user-scalable=no,minimum-scale=1,maximum-scale=1">
	<meta name="theme-color" content="#ffffff">
	<link href="./style.css" rel="stylesheet">
	</head>

	<body>
	<div id="app"></div>
	<script type="module" src="./themes.js"></script>
	<script type="module" src="./main.js"></script>
	</body>
	</html>
	import { THEMES } from './themes.js'

	const div = ( className ) => {
	const elem = document.createElement('div')
	elem.classList.add(className)
	return elem
	}

	const colorBlock = (paletteName, palette) => {
	const block = div('colorBlock')
	const bgDiv = div('bg')
	bgDiv.style.backgroundColor = palette.bg
	bgDiv.style.color = palette.st
	bgDiv.innerHTML = `<h3>${paletteName}</h3>`

	const colors = div('fg')
	palette.fg.forEach(color => {
	const colDiv = div('color')
	colDiv.style.backgroundColor = color
	colors.appendChild(colDiv)
	})
	block.appendChild(bgDiv)
	block.appendChild(colors)
	return block
	}

	const app = document.getElementById('app')
	const paletteList = Object.keys(THEMES)
	paletteList.forEach(name =>
	app.appendChild(colorBlock(name, THEMES[name]))
	)
	body {
	box-sizing: border-box;
	font-family: system-ui,
	-apple-system, BlinkMacSystemFont,
	"Segoe UI",
	"Roboto",
	"Oxygen",
	"Ubuntu",
	"Cantarell",
	"Fira Sans",
	"Droid Sans",
	"Helvetica Neue",
	Arial, sans-serif;
	}

	body,
	#app {
	margin: 0;
	padding: 0;
	}

	body {
	padding: 2em;
	}

	#app {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
	}

	.colorBlock {
	margin: 1em;
	}

	.colorBlock .bg {
	padding: 0.15em;
	text-align: center;
	}

	.colorBlock .fg {
	display: flex;
	flex-flow: row nowrap;
	}

	.colorBlock .fg .color {
	height: 2em;
	flex-basis: 25%;
	}