mainR = 8
Consultant Designer & Developer
Public
Edited
May 9, 2024
1 star
minorR = mainR * Math.sqrt(1 / 4)
height = width / 1.618
colorData = {
const colorObject = flatten(baseColors);
return Object.entries(colorObject).map(([key, hex]) => {
const c = new Color(hex);
const p3String = createVibrantP3(hex);
const [origL, origC, origH] = c.to("LCH").coords;
const [p3L, p3C, p3H] = new Color(p3String).to("LCH").coords;
return {
key,
hex,
origL,
origC,
origH,
p3: p3String,
p3L,
p3C,
p3H
};
});
}
function createVibrantP3(color) {
const c = new Color(color);
const [r, g, b] = c.to("sRGB").coords.map((d) => d.toFixed(7));
return `color(display-p3 ${r} ${g} ${b})`;
}
function flatten(object, { separator = "-" } = {}) {
return flattenObjectWithParentKey(object, { separator });
}
function flattenObjectWithParentKey(
object,
{ parentKey, separator = "." } = {}
) {
return Object.keys(object).reduce((acc, k) => {
const prop = parentKey === undefined ? k : `${parentKey}${separator}${k}`;
const value = object[k];
if (isValidValue(value)) {
return {
...acc,
[prop]: value
};
}
return {
...acc,
...flattenObjectWithParentKey(
/** @type {NestedStringKeyObject} */ value,
{
parentKey: prop,
separator
}
)
};
}, {});
}
function isValidValue(v) {
if (Array.isArray(v) || ["string", "number"].includes(typeof v)) {
return true;
}
return false;
}
colorTokens = ({
title: "Colors",
description:
"Hex color codes that can be shared, cross-platform. They can be converted at point of usage, such as HSL for web or CMYK for print.",
items: [
{
name: "Dark",
value: "#030303"
},
{
name: "Dark Glare",
value: "#171717"
},
{
name: "Mid",
value: "#444444"
},
{
name: "Mid Glare",
value: "#cccccc"
},
{
name: "Light",
value: "#ffffff"
},
{
name: "Light Shade",
value: "#f7f7f7"
},
{
name: "Primary",
value: "#FF006A"
},
{
name: "Primary Glare",
value: "#ffeff6"
},
{
name: "Secondary",
value: "#00FFD4"
},
{
name: "Tertiary",
value: "#350DF2"
},
{
name: "Quaternary",
value: "#FFD501"
},
{
name: "Quinary",
value: "#00D5FF"
},
{
name: "Quinary Shade",
value: "#0AC"
}
]
})
Color = (await import("https://esm.sh/colorjs.io@0.5.0")).default
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
