diff --git a/examples/example.css b/examples/example.css new file mode 100644 index 0000000..d9a0a31 --- /dev/null +++ b/examples/example.css @@ -0,0 +1,686 @@ +:root { + --color-priduck-hue: 180; +} + +/* https://www.w3schools.com/howto/howto_js_rangeslider.asp */ +.slidecontainer { + width: 100%; /* Width of the outside container */ +} + +/* The slider itself */ +.slider { + -webkit-appearance: none; /* Override default CSS styles */ + appearance: none; + width: 100%; /* Full-width */ + height: 25px; /* Specified height */ + background: #d3d3d3; /* Grey background */ + outline: none; /* Remove outline */ + opacity: 0.7; /* Set transparency (for mouse-over effects on hover) */ + -webkit-transition: 0.2s; /* 0.2 seconds transition on hover */ + transition: opacity 0.2s; +} + +/* Mouse-over effects */ +.slider:hover { + opacity: 1; /* Fully shown on mouse-over */ +} + +/* The slider handle (use -webkit- (Chrome, Opera, Safari, Edge) and -moz- (Firefox) to override default look) */ +.slider::-webkit-slider-thumb { + -webkit-appearance: none; /* Override default look */ + appearance: none; + width: 25px; /* Set a specific slider handle width */ + height: 25px; /* Slider handle height */ + background: #04aa6d; /* Green background */ + cursor: pointer; /* Cursor on hover */ +} + +.slider::-moz-range-thumb { + width: 25px; /* Set a specific slider handle width */ + height: 25px; /* Slider handle height */ + background: #04aa6d; /* Green background */ + cursor: pointer; /* Cursor on hover */ +} + +#hue { + display: inline-block; + min-width: 5em; +} + +#hue-box { + display: inline-block; + min-width: 5em; + min-height: 1em; + border: 1px solid black; + background-color: lch(50% 100 var(--color-priduck-hue)); +} + +table { + width: 100%; +} + +td, +th { + text-align: center; +} + +.color-lch, +.color-rgb { + font-size: 70%; +} + +.fg-dark { + color: white; +} + +.fg-light { + color: black; +} + +.fg-c0b0 { + color: var(--color-priduck-c0b0); +} +.fg-c1b0 { + color: var(--color-priduck-c1b0); +} +.fg-c2b0 { + color: var(--color-priduck-c2b0); +} +.fg-c3b0 { + color: var(--color-priduck-c3b0); +} +.fg-c4b0 { + color: var(--color-priduck-c4b0); +} +.fg-c5b0 { + color: var(--color-priduck-c5b0); +} +.fg-c6b0 { + color: var(--color-priduck-c6b0); +} +.fg-c7b0 { + color: var(--color-priduck-c7b0); +} +.fg-c8b0 { + color: var(--color-priduck-c8b0); +} +.fg-c9b0 { + color: var(--color-priduck-c9b0); +} +.fg-c0b1 { + color: var(--color-priduck-c0b1); +} +.fg-c1b1 { + color: var(--color-priduck-c1b1); +} +.fg-c2b1 { + color: var(--color-priduck-c2b1); +} +.fg-c3b1 { + color: var(--color-priduck-c3b1); +} +.fg-c4b1 { + color: var(--color-priduck-c4b1); +} +.fg-c5b1 { + color: var(--color-priduck-c5b1); +} +.fg-c6b1 { + color: var(--color-priduck-c6b1); +} +.fg-c7b1 { + color: var(--color-priduck-c7b1); +} +.fg-c8b1 { + color: var(--color-priduck-c8b1); +} +.fg-c9b1 { + color: var(--color-priduck-c9b1); +} +.fg-c0b2 { + color: var(--color-priduck-c0b2); +} +.fg-c1b2 { + color: var(--color-priduck-c1b2); +} +.fg-c2b2 { + color: var(--color-priduck-c2b2); +} +.fg-c3b2 { + color: var(--color-priduck-c3b2); +} +.fg-c4b2 { + color: var(--color-priduck-c4b2); +} +.fg-c5b2 { + color: var(--color-priduck-c5b2); +} +.fg-c6b2 { + color: var(--color-priduck-c6b2); +} +.fg-c7b2 { + color: var(--color-priduck-c7b2); +} +.fg-c8b2 { + color: var(--color-priduck-c8b2); +} +.fg-c9b2 { + color: var(--color-priduck-c9b2); +} +.fg-c0b3 { + color: var(--color-priduck-c0b3); +} +.fg-c1b3 { + color: var(--color-priduck-c1b3); +} +.fg-c2b3 { + color: var(--color-priduck-c2b3); +} +.fg-c3b3 { + color: var(--color-priduck-c3b3); +} +.fg-c4b3 { + color: var(--color-priduck-c4b3); +} +.fg-c5b3 { + color: var(--color-priduck-c5b3); +} +.fg-c6b3 { + color: var(--color-priduck-c6b3); +} +.fg-c7b3 { + color: var(--color-priduck-c7b3); +} +.fg-c8b3 { + color: var(--color-priduck-c8b3); +} +.fg-c9b3 { + color: var(--color-priduck-c9b3); +} +.fg-c0b4 { + color: var(--color-priduck-c0b4); +} +.fg-c1b4 { + color: var(--color-priduck-c1b4); +} +.fg-c2b4 { + color: var(--color-priduck-c2b4); +} +.fg-c3b4 { + color: var(--color-priduck-c3b4); +} +.fg-c4b4 { + color: var(--color-priduck-c4b4); +} +.fg-c5b4 { + color: var(--color-priduck-c5b4); +} +.fg-c6b4 { + color: var(--color-priduck-c6b4); +} +.fg-c7b4 { + color: var(--color-priduck-c7b4); +} +.fg-c8b4 { + color: var(--color-priduck-c8b4); +} +.fg-c9b4 { + color: var(--color-priduck-c9b4); +} +.fg-c0b5 { + color: var(--color-priduck-c0b5); +} +.fg-c1b5 { + color: var(--color-priduck-c1b5); +} +.fg-c2b5 { + color: var(--color-priduck-c2b5); +} +.fg-c3b5 { + color: var(--color-priduck-c3b5); +} +.fg-c4b5 { + color: var(--color-priduck-c4b5); +} +.fg-c5b5 { + color: var(--color-priduck-c5b5); +} +.fg-c6b5 { + color: var(--color-priduck-c6b5); +} +.fg-c7b5 { + color: var(--color-priduck-c7b5); +} +.fg-c8b5 { + color: var(--color-priduck-c8b5); +} +.fg-c9b5 { + color: var(--color-priduck-c9b5); +} +.fg-c0b6 { + color: var(--color-priduck-c0b6); +} +.fg-c1b6 { + color: var(--color-priduck-c1b6); +} +.fg-c2b6 { + color: var(--color-priduck-c2b6); +} +.fg-c3b6 { + color: var(--color-priduck-c3b6); +} +.fg-c4b6 { + color: var(--color-priduck-c4b6); +} +.fg-c5b6 { + color: var(--color-priduck-c5b6); +} +.fg-c6b6 { + color: var(--color-priduck-c6b6); +} +.fg-c7b6 { + color: var(--color-priduck-c7b6); +} +.fg-c8b6 { + color: var(--color-priduck-c8b6); +} +.fg-c9b6 { + color: var(--color-priduck-c9b6); +} +.fg-c0b7 { + color: var(--color-priduck-c0b7); +} +.fg-c1b7 { + color: var(--color-priduck-c1b7); +} +.fg-c2b7 { + color: var(--color-priduck-c2b7); +} +.fg-c3b7 { + color: var(--color-priduck-c3b7); +} +.fg-c4b7 { + color: var(--color-priduck-c4b7); +} +.fg-c5b7 { + color: var(--color-priduck-c5b7); +} +.fg-c6b7 { + color: var(--color-priduck-c6b7); +} +.fg-c7b7 { + color: var(--color-priduck-c7b7); +} +.fg-c8b7 { + color: var(--color-priduck-c8b7); +} +.fg-c9b7 { + color: var(--color-priduck-c9b7); +} +.fg-c0b8 { + color: var(--color-priduck-c0b8); +} +.fg-c1b8 { + color: var(--color-priduck-c1b8); +} +.fg-c2b8 { + color: var(--color-priduck-c2b8); +} +.fg-c3b8 { + color: var(--color-priduck-c3b8); +} +.fg-c4b8 { + color: var(--color-priduck-c4b8); +} +.fg-c5b8 { + color: var(--color-priduck-c5b8); +} +.fg-c6b8 { + color: var(--color-priduck-c6b8); +} +.fg-c7b8 { + color: var(--color-priduck-c7b8); +} +.fg-c8b8 { + color: var(--color-priduck-c8b8); +} +.fg-c9b8 { + color: var(--color-priduck-c9b8); +} +.fg-c0b9 { + color: var(--color-priduck-c0b9); +} +.fg-c1b9 { + color: var(--color-priduck-c1b9); +} +.fg-c2b9 { + color: var(--color-priduck-c2b9); +} +.fg-c3b9 { + color: var(--color-priduck-c3b9); +} +.fg-c4b9 { + color: var(--color-priduck-c4b9); +} +.fg-c5b9 { + color: var(--color-priduck-c5b9); +} +.fg-c6b9 { + color: var(--color-priduck-c6b9); +} +.fg-c7b9 { + color: var(--color-priduck-c7b9); +} +.fg-c8b9 { + color: var(--color-priduck-c8b9); +} +.fg-c9b9 { + color: var(--color-priduck-c9b9); +} + +.bg-c0b0 { + background-color: var(--color-priduck-c0b0); +} +.bg-c1b0 { + background-color: var(--color-priduck-c1b0); +} +.bg-c2b0 { + background-color: var(--color-priduck-c2b0); +} +.bg-c3b0 { + background-color: var(--color-priduck-c3b0); +} +.bg-c4b0 { + background-color: var(--color-priduck-c4b0); +} +.bg-c5b0 { + background-color: var(--color-priduck-c5b0); +} +.bg-c6b0 { + background-color: var(--color-priduck-c6b0); +} +.bg-c7b0 { + background-color: var(--color-priduck-c7b0); +} +.bg-c8b0 { + background-color: var(--color-priduck-c8b0); +} +.bg-c9b0 { + background-color: var(--color-priduck-c9b0); +} +.bg-c0b1 { + background-color: var(--color-priduck-c0b1); +} +.bg-c1b1 { + background-color: var(--color-priduck-c1b1); +} +.bg-c2b1 { + background-color: var(--color-priduck-c2b1); +} +.bg-c3b1 { + background-color: var(--color-priduck-c3b1); +} +.bg-c4b1 { + background-color: var(--color-priduck-c4b1); +} +.bg-c5b1 { + background-color: var(--color-priduck-c5b1); +} +.bg-c6b1 { + background-color: var(--color-priduck-c6b1); +} +.bg-c7b1 { + background-color: var(--color-priduck-c7b1); +} +.bg-c8b1 { + background-color: var(--color-priduck-c8b1); +} +.bg-c9b1 { + background-color: var(--color-priduck-c9b1); +} +.bg-c0b2 { + background-color: var(--color-priduck-c0b2); +} +.bg-c1b2 { + background-color: var(--color-priduck-c1b2); +} +.bg-c2b2 { + background-color: var(--color-priduck-c2b2); +} +.bg-c3b2 { + background-color: var(--color-priduck-c3b2); +} +.bg-c4b2 { + background-color: var(--color-priduck-c4b2); +} +.bg-c5b2 { + background-color: var(--color-priduck-c5b2); +} +.bg-c6b2 { + background-color: var(--color-priduck-c6b2); +} +.bg-c7b2 { + background-color: var(--color-priduck-c7b2); +} +.bg-c8b2 { + background-color: var(--color-priduck-c8b2); +} +.bg-c9b2 { + background-color: var(--color-priduck-c9b2); +} +.bg-c0b3 { + background-color: var(--color-priduck-c0b3); +} +.bg-c1b3 { + background-color: var(--color-priduck-c1b3); +} +.bg-c2b3 { + background-color: var(--color-priduck-c2b3); +} +.bg-c3b3 { + background-color: var(--color-priduck-c3b3); +} +.bg-c4b3 { + background-color: var(--color-priduck-c4b3); +} +.bg-c5b3 { + background-color: var(--color-priduck-c5b3); +} +.bg-c6b3 { + background-color: var(--color-priduck-c6b3); +} +.bg-c7b3 { + background-color: var(--color-priduck-c7b3); +} +.bg-c8b3 { + background-color: var(--color-priduck-c8b3); +} +.bg-c9b3 { + background-color: var(--color-priduck-c9b3); +} +.bg-c0b4 { + background-color: var(--color-priduck-c0b4); +} +.bg-c1b4 { + background-color: var(--color-priduck-c1b4); +} +.bg-c2b4 { + background-color: var(--color-priduck-c2b4); +} +.bg-c3b4 { + background-color: var(--color-priduck-c3b4); +} +.bg-c4b4 { + background-color: var(--color-priduck-c4b4); +} +.bg-c5b4 { + background-color: var(--color-priduck-c5b4); +} +.bg-c6b4 { + background-color: var(--color-priduck-c6b4); +} +.bg-c7b4 { + background-color: var(--color-priduck-c7b4); +} +.bg-c8b4 { + background-color: var(--color-priduck-c8b4); +} +.bg-c9b4 { + background-color: var(--color-priduck-c9b4); +} +.bg-c0b5 { + background-color: var(--color-priduck-c0b5); +} +.bg-c1b5 { + background-color: var(--color-priduck-c1b5); +} +.bg-c2b5 { + background-color: var(--color-priduck-c2b5); +} +.bg-c3b5 { + background-color: var(--color-priduck-c3b5); +} +.bg-c4b5 { + background-color: var(--color-priduck-c4b5); +} +.bg-c5b5 { + background-color: var(--color-priduck-c5b5); +} +.bg-c6b5 { + background-color: var(--color-priduck-c6b5); +} +.bg-c7b5 { + background-color: var(--color-priduck-c7b5); +} +.bg-c8b5 { + background-color: var(--color-priduck-c8b5); +} +.bg-c9b5 { + background-color: var(--color-priduck-c9b5); +} +.bg-c0b6 { + background-color: var(--color-priduck-c0b6); +} +.bg-c1b6 { + background-color: var(--color-priduck-c1b6); +} +.bg-c2b6 { + background-color: var(--color-priduck-c2b6); +} +.bg-c3b6 { + background-color: var(--color-priduck-c3b6); +} +.bg-c4b6 { + background-color: var(--color-priduck-c4b6); +} +.bg-c5b6 { + background-color: var(--color-priduck-c5b6); +} +.bg-c6b6 { + background-color: var(--color-priduck-c6b6); +} +.bg-c7b6 { + background-color: var(--color-priduck-c7b6); +} +.bg-c8b6 { + background-color: var(--color-priduck-c8b6); +} +.bg-c9b6 { + background-color: var(--color-priduck-c9b6); +} +.bg-c0b7 { + background-color: var(--color-priduck-c0b7); +} +.bg-c1b7 { + background-color: var(--color-priduck-c1b7); +} +.bg-c2b7 { + background-color: var(--color-priduck-c2b7); +} +.bg-c3b7 { + background-color: var(--color-priduck-c3b7); +} +.bg-c4b7 { + background-color: var(--color-priduck-c4b7); +} +.bg-c5b7 { + background-color: var(--color-priduck-c5b7); +} +.bg-c6b7 { + background-color: var(--color-priduck-c6b7); +} +.bg-c7b7 { + background-color: var(--color-priduck-c7b7); +} +.bg-c8b7 { + background-color: var(--color-priduck-c8b7); +} +.bg-c9b7 { + background-color: var(--color-priduck-c9b7); +} +.bg-c0b8 { + background-color: var(--color-priduck-c0b8); +} +.bg-c1b8 { + background-color: var(--color-priduck-c1b8); +} +.bg-c2b8 { + background-color: var(--color-priduck-c2b8); +} +.bg-c3b8 { + background-color: var(--color-priduck-c3b8); +} +.bg-c4b8 { + background-color: var(--color-priduck-c4b8); +} +.bg-c5b8 { + background-color: var(--color-priduck-c5b8); +} +.bg-c6b8 { + background-color: var(--color-priduck-c6b8); +} +.bg-c7b8 { + background-color: var(--color-priduck-c7b8); +} +.bg-c8b8 { + background-color: var(--color-priduck-c8b8); +} +.bg-c9b8 { + background-color: var(--color-priduck-c9b8); +} +.bg-c0b9 { + background-color: var(--color-priduck-c0b9); +} +.bg-c1b9 { + background-color: var(--color-priduck-c1b9); +} +.bg-c2b9 { + background-color: var(--color-priduck-c2b9); +} +.bg-c3b9 { + background-color: var(--color-priduck-c3b9); +} +.bg-c4b9 { + background-color: var(--color-priduck-c4b9); +} +.bg-c5b9 { + background-color: var(--color-priduck-c5b9); +} +.bg-c6b9 { + background-color: var(--color-priduck-c6b9); +} +.bg-c7b9 { + background-color: var(--color-priduck-c7b9); +} +.bg-c8b9 { + background-color: var(--color-priduck-c8b9); +} +.bg-c9b9 { + background-color: var(--color-priduck-c9b9); +} + +.controls { + display: grid; + grid-template-columns: 1fr 1fr 1fr; + grid-column-gap: 1em; +} diff --git a/examples/example.js b/examples/example.js new file mode 100644 index 0000000..6183e87 --- /dev/null +++ b/examples/example.js @@ -0,0 +1,144 @@ +// Set up the hue slider. +const slider = document.getElementById("hue-selector"); +const output = document.getElementById("hue"); +const box = document.getElementById("hue-box"); + +output.innerHTML = slider.value; // Display the default slider value + +// If we have a query parameter, select that. +const urlParams = new URLSearchParams(window.location.search); +const hueParam = urlParams.get("hue"); + +if (hueParam) { + window.setTimeout(() => setHue(hueParam)); +} + +// Update the current slider value (each time you drag the slider handle) +slider.oninput = function () { + setHue(this.value); +}; + +window.setTimeout(() => update(), 250); + +// Color Theme +var autoColorTheme = document.getElementById("auto-color-scheme"); +var lightColorTheme = document.getElementById("light-color-scheme"); +var darkColorTheme = document.getElementById("dark-color-scheme"); + +autoColorTheme.onclick = function () { + document.documentElement.removeAttribute("data-prefers-color-scheme"); +}; + +lightColorTheme.onclick = function () { + document.documentElement.setAttribute("data-prefers-color-scheme", "light"); +}; + +darkColorTheme.onclick = function () { + document.documentElement.setAttribute("data-prefers-color-scheme", "dark"); +}; + +// Prefers Contrast +var autoContrast = document.getElementById("auto-contrast-selector"); +var moreContrast = document.getElementById("more-contrast-selector"); +var lessContrast = document.getElementById("less-contrast-selector"); + +autoContrast.onclick = function () { + document.documentElement.removeAttribute("data-prefers-contrast"); +}; + +moreContrast.onclick = function () { + document.documentElement.setAttribute("data-prefers-contrast", "more"); +}; + +lessContrast.onclick = function () { + document.documentElement.setAttribute("data-prefers-contrast", "less"); +}; + +// Translating colors. We use a canvas to paint the color and then get the +// RGB from there for programs that need it (Inkscape and Gimp). +// +// https://stackoverflow.com/a/76469049 +const canvas = document.createElement("canvas"); + +canvas.width = canvas.height = 1; + +const ctx = canvas.getContext("2d", { willReadFrequently: true }); + +function getRgb(style) { + ctx.fillStyle = style; + ctx.fillRect(0, 0, 1, 1); + + const colors = ctx.getImageData(0, 0, 1, 1).data; + const r = colors[0].toString(16).padStart(2, "0").toLowerCase(); + const g = colors[1].toString(16).padStart(2, "0").toLowerCase(); + const b = colors[2].toString(16).padStart(2, "0").toLowerCase(); + const channels = [colors[0], colors[1], colors[2]]; + + return [channels.join(" "), `#${r}${g}${b}`]; +} + +/** + * Implements a simple debounce function. + * + * @param func + * @param {number} timeout + * @returns + */ +function debounce(func, timeout = 300) { + let timer; + + return (...args) => { + clearTimeout(timer); + timer = setTimeout(() => { + func.apply(this, args); + }, timeout); + }; +} + +// Used to avoid hammering the CPU while we calculate colors. +const update = debounce(_update); + +/** + * Sets the hue slider to the given color. + * + * @param {string} hue + */ +function setHue(hue) { + // Set the hue on the screen. + console.log("setting hue", hue); + document.documentElement.style.setProperty("--color-priduck-hue", hue); + output.innerHTML = hue; + update(); +} + +/** + * Updates all of the boxes and copy icons. + */ +function _update() { + // Set the history URL. + console.log("setting url"); + const url = new URL(location); + const hue = output.innerHTML; + url.searchParams.set("hue", hue); + history.pushState({}, "", url); + + // Update the controls. + const range = [0, 1, 2, 3, 4, 5, 6, 7, 8, 9]; + for (const c of range) { + for (const b of range) { + const id = `c${c}b${b}`; + const cb = document.getElementById(id); + const style = window.getComputedStyle(cb, null); + const lch = style["background-color"]; + const [colors, rgb] = getRgb(lch); + + cb.innerHTML = ` +