Test
let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", {
space: "lch", // interpolation space
outputSpace: "srgb"
});
redgreen(.5); // midpoint
// Highlights all custom elements on the page. | |
// 7/31/2016: updated to work with both shadow dom v0 and v1. | |
// To create a bookmarklet, use http://ted.mielczarek.org/code/mozilla/bookmarklet.html | |
var allCustomElements = []; | |
function isCustomElement(el) { | |
const isAttr = el.getAttribute('is'); | |
// Check for <super-button> and <button is="super-button">. | |
return el.localName.includes('-') || isAttr && isAttr.includes('-'); |
/** | |
* Overriding presentational HTML | |
*/ | |
div { | |
background: pink; | |
} |
/** | |
* Negative opacity | |
*/ | |
body { background: red } | |
@supports (opacity: -3.1415926535) { | |
body { background: green } | |
} |
// Migrate Tape tests to Chai tets (used by Mocha) | |
// This will not get you 100% of the way, but it will get you most of the way there (depending on your tests). | |
// I mainly only had to rewrite tests that used subtests (`t.test()`): For those, I used `describe` for the outer test, and converted `t.test()` to `test()` | |
import { assert } from '@esm-bundle/chai'; | |
assert.ok = assert.isOk.bind(assert); | |
assert.pass = assert.isOk.bind(assert, true); | |
assert.end = () => {}; // no-op | |
assert.plan = () => {}; // no-op, doesn't seem to be needed with WTR |
{ | |
"workbench.colorTheme": "Solarized Light", | |
"editor.fontFamily": "Consolas, Menlo, Monaco, 'Courier New', monospace", | |
"editor.insertSpaces": false, | |
"editor.inlineSuggest.enabled": true, | |
"editor.fontSize": 14.5, | |
"editor.renderWhitespace": "boundary", | |
"editor.codeLens": false, | |
"editor.inlayHints.fontFamily": "Consolas, Menlo, Monaco, 'Courier New', monospace", | |
"diffEditor.codeLens": true, |
let color = new Color("p3", [0, 1, 0]);
let redgreen = color.range("red", {
space: "lch", // interpolation space
outputSpace: "srgb"
});
redgreen(.5); // midpoint
let middleRed = new Color("rgb(100 0 0)");
let middleGreen = new Color("rgb(0 100 0)");
let mixed = middleRed.mix(middleGreen, -.2, {space: "srgb"});
middleRed.hue;
mixed.hue;
/** | |
* LCH vs HSL colors for the same lightness | |
*/ | |
div { | |
width: 100%; | |
height: 6em; | |
background: linear-gradient(to right, var(--stops)); | |
--stops: gray, gray; | |
--l: 50%; |
/** | |
* Extrapolation | |
*/ | |
@keyframes funky { | |
to { | |
background: gray; | |
} | |
} |
How to lighten/darken
let color = new Color("hsl(20, 100%, 30%)");
// HSL lightness adjustment
let lighter = color.clone();