Skip to content

Instantly share code, notes, and snippets.

View LeaVerou's full-sized avatar

Lea Verou LeaVerou

View GitHub Profile
@LeaVerou
LeaVerou / code.js
Created July 5, 2024 13:05
eleventyConfig properties
function getAllProperties(obj){
var allProps = []
, curr = obj
do{
var props = Object.getOwnPropertyNames(curr)
props.forEach(function(prop){
if (allProps.indexOf(prop) === -1)
allProps.push(prop)
})
}while(curr = Object.getPrototypeOf(curr))
@LeaVerou
LeaVerou / dabblet.css
Created June 19, 2024 15:12
Test for discrete animations
/* Test for discrete animations */
@keyframes discrete {
from { --background: lime }
to { --background: green }
}
body {
background: var(--background, red);
animation: 2s discrete infinite linear;
@LeaVerou
LeaVerou / dabblet.css
Created June 17, 2024 15:23
Dynamic custom property references? You wish
/* Dynamic custom property references? You wish */
--foo: --bar;
--bar: green;
background: red;
background: var(var(--foo));
@LeaVerou
LeaVerou / dabblet.css
Last active May 29, 2024 15:59
Relative Color Syntax (RCS) + system colors testcase
/**
* Relative Color Syntax (RCS) + system colors testcase
* Green: PASS Orange: FAIL Red: No RCS support
*/
background: red;
background: oklch(from gold l c h);
background: oklch(from canvas .7 0.2 140);
@LeaVerou
LeaVerou / dabblet.css
Created May 27, 2024 20:54
accentColor system color
/**
* accentColor system color
*/
accent-color: lime;
background: accentColor;
@LeaVerou
LeaVerou / dabblet.css
Created May 22, 2024 01:06
Relative Color Syntax (RCS) testcase
/**
* Relative Color Syntax (RCS) testcase
*/
background: red;
background: oklch(from yellowgreen l calc(c * 1.2) calc(h + 10));
@LeaVerou
LeaVerou / dabblet.css
Last active April 24, 2024 17:40
Polar interpolation discontinuity
/**
* Polar interpolation discontinuity
*/
div:nth-of-type(1) {
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 180));
}
div:nth-of-type(2) {
background: linear-gradient(to right in oklch, oklch(70% 0.1 0), oklch(70% 0.1 179));
@LeaVerou
LeaVerou / dabblet.css
Last active April 24, 2024 17:41
Polar interpolation issues
/**
* Polar interpolation issues
*/
div {
padding: 2em;
flex: 1;
}
div:nth-of-type(1) {
@LeaVerou
LeaVerou / dabblet.css
Last active April 24, 2024 17:31
none-containing values as intermediate stops
/**
* none-containing values as intermediate stops
*/
div:nth-of-type(1) {
background: linear-gradient(to right in oklch, oklch(80% 0.1 0), oklch(80% 0.1 170));
}
div:nth-of-type(2) {
background: linear-gradient(to right in oklch, oklch(80% 0.1 0), oklch(50% none none), oklch(80% 0.1 170));

Custom coord types

let turquoise = new Color("oklch(.7 .1 180)");

// Custom functional format:
turquoise.toString({format: {
	name: "oklch",
	coords: [