jfrancos

https://oklch.beauty

This app is designed around a problem I've faced as a frontend software engineer: my UI person sends over some figma docs to turn into a react component/app, including one or two or three shades of a particular color. But, for any given color:

• I'd like to have 11 shades up front, so I know I won't have to interrupt my flow to think about colors

• I don't want to bother my UI person to come up with shades of a color beyond the one or two or three they care about

I found a few solutions online but I found them confusing to use, and they seemed to be using HSL rather than OKLCH. I've come up with a solution that takes as input the shades given by your UI person, and sends to your clipboard a colors object that you can add directly to your Tailwind of Unocss config.

jfrancos

#!/usr/bin/env npx tsx --experimental-network-imports --no-warnings

// If there was a tool for generating shades of colors meant to be used
// with Tailwind, it would make sense for the lightnesses of the
// generated colors to (by default at least) match the lightnesses of
// the standard colors defined by Tailwind, as much as possible

import { Script } from "vm";
// @ts-expect-error Import module
import { oklch } from "https://cdn.skypack.dev/culori";

jfrancos

#!/usr/bin/env npx ts-node --skip-project --transpile-only

import lighthouse from "lighthouse";
import { launch } from "chrome-launcher";
import { pick } from "lodash";
import { preview, build } from "vite";
import { mkdtemp, rm } from "fs/promises";
import { tmpdir } from "os";
import { join } from "path";
import { AddressInfo } from "net";

jfrancos

import 'fake-indexeddb/auto';
import { readFile, writeFile } from 'fs/promises';
import { exportToJsonString } from 'indexeddb-export-import';
import { getDatabase } from './Database';

const inFile = 'bulkInsertableData.json';
const outFile = 'indexeddb.json';
const collectionName = 'collection';

const prepIndexedDB = async () => {