chore: working out color ideas
This commit is contained in:
parent
c933635061
commit
fab981ebbd
|
|
@ -28,8 +28,10 @@
|
|||
{
|
||||
# Shell
|
||||
default = pkgs.mkShell {
|
||||
packages = [ ]
|
||||
++ project-config.packages;
|
||||
packages = [
|
||||
pkgs.deno
|
||||
]
|
||||
++ project-config.packages;
|
||||
|
||||
shellHook = project-config.shellHook;
|
||||
};
|
||||
|
|
|
|||
38
src/cli.ts
Normal file
38
src/cli.ts
Normal file
|
|
@ -0,0 +1,38 @@
|
|||
// We need an empty export for top-level await.
|
||||
export {};
|
||||
|
||||
// Start with the basic CSS header.
|
||||
let lines: string[] = [":root {"];
|
||||
|
||||
// We have ten colors, with 0 being the base hue and the others being evenly
|
||||
// rotated around the color wheel.
|
||||
for (let color = 0; color < 10; color++) {
|
||||
// Figure out the rotation.
|
||||
const rotation = color * 36; // 1/10th of a circle
|
||||
|
||||
// For each hue, we have ten levels of brightness ranging from very dark
|
||||
// to very light.
|
||||
for (let brightness = 0; brightness < 10; brightness++) {
|
||||
// We use a standard code (--color-cXbY) for our codes.
|
||||
const code = `--color-c${color}b${brightness}`;
|
||||
|
||||
// Figure out the ramps we are using for brighteness.
|
||||
const l = brightness * 11;
|
||||
const s = 50 - brightness * 5;
|
||||
|
||||
// Write out the CSS.
|
||||
lines.push(
|
||||
` ${code}: lch(${l.toFixed(1)} ${s.toFixed(
|
||||
1,
|
||||
)} calc(var(--color-hue) + ${rotation}));`,
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
// Finish up the lines.
|
||||
lines.push("}");
|
||||
|
||||
// Write out the files.
|
||||
const text = new TextEncoder().encode(lines.join("\n"));
|
||||
|
||||
await Deno.writeFile("src/colors.css", text, { mode: 0o644 });
|
||||
102
src/colors.css
Normal file
102
src/colors.css
Normal file
|
|
@ -0,0 +1,102 @@
|
|||
:root {
|
||||
--color-c0b0: lch(0 50 calc(var(--color-hue) + 0));
|
||||
--color-c0b1: lch(11 45 calc(var(--color-hue) + 0));
|
||||
--color-c0b2: lch(22 40 calc(var(--color-hue) + 0));
|
||||
--color-c0b3: lch(33 35 calc(var(--color-hue) + 0));
|
||||
--color-c0b4: lch(44 30 calc(var(--color-hue) + 0));
|
||||
--color-c0b5: lch(55 25 calc(var(--color-hue) + 0));
|
||||
--color-c0b6: lch(66 20 calc(var(--color-hue) + 0));
|
||||
--color-c0b7: lch(77 15 calc(var(--color-hue) + 0));
|
||||
--color-c0b8: lch(88 10 calc(var(--color-hue) + 0));
|
||||
--color-c0b9: lch(99 5 calc(var(--color-hue) + 0));
|
||||
--color-c1b0: lch(0 50 calc(var(--color-hue) + 36));
|
||||
--color-c1b1: lch(11 45 calc(var(--color-hue) + 36));
|
||||
--color-c1b2: lch(22 40 calc(var(--color-hue) + 36));
|
||||
--color-c1b3: lch(33 35 calc(var(--color-hue) + 36));
|
||||
--color-c1b4: lch(44 30 calc(var(--color-hue) + 36));
|
||||
--color-c1b5: lch(55 25 calc(var(--color-hue) + 36));
|
||||
--color-c1b6: lch(66 20 calc(var(--color-hue) + 36));
|
||||
--color-c1b7: lch(77 15 calc(var(--color-hue) + 36));
|
||||
--color-c1b8: lch(88 10 calc(var(--color-hue) + 36));
|
||||
--color-c1b9: lch(99 5 calc(var(--color-hue) + 36));
|
||||
--color-c2b0: lch(0 50 calc(var(--color-hue) + 72));
|
||||
--color-c2b1: lch(11 45 calc(var(--color-hue) + 72));
|
||||
--color-c2b2: lch(22 40 calc(var(--color-hue) + 72));
|
||||
--color-c2b3: lch(33 35 calc(var(--color-hue) + 72));
|
||||
--color-c2b4: lch(44 30 calc(var(--color-hue) + 72));
|
||||
--color-c2b5: lch(55 25 calc(var(--color-hue) + 72));
|
||||
--color-c2b6: lch(66 20 calc(var(--color-hue) + 72));
|
||||
--color-c2b7: lch(77 15 calc(var(--color-hue) + 72));
|
||||
--color-c2b8: lch(88 10 calc(var(--color-hue) + 72));
|
||||
--color-c2b9: lch(99 5 calc(var(--color-hue) + 72));
|
||||
--color-c3b0: lch(0 50 calc(var(--color-hue) + 108));
|
||||
--color-c3b1: lch(11 45 calc(var(--color-hue) + 108));
|
||||
--color-c3b2: lch(22 40 calc(var(--color-hue) + 108));
|
||||
--color-c3b3: lch(33 35 calc(var(--color-hue) + 108));
|
||||
--color-c3b4: lch(44 30 calc(var(--color-hue) + 108));
|
||||
--color-c3b5: lch(55 25 calc(var(--color-hue) + 108));
|
||||
--color-c3b6: lch(66 20 calc(var(--color-hue) + 108));
|
||||
--color-c3b7: lch(77 15 calc(var(--color-hue) + 108));
|
||||
--color-c3b8: lch(88 10 calc(var(--color-hue) + 108));
|
||||
--color-c3b9: lch(99 5 calc(var(--color-hue) + 108));
|
||||
--color-c4b0: lch(0 50 calc(var(--color-hue) + 144));
|
||||
--color-c4b1: lch(11 45 calc(var(--color-hue) + 144));
|
||||
--color-c4b2: lch(22 40 calc(var(--color-hue) + 144));
|
||||
--color-c4b3: lch(33 35 calc(var(--color-hue) + 144));
|
||||
--color-c4b4: lch(44 30 calc(var(--color-hue) + 144));
|
||||
--color-c4b5: lch(55 25 calc(var(--color-hue) + 144));
|
||||
--color-c4b6: lch(66 20 calc(var(--color-hue) + 144));
|
||||
--color-c4b7: lch(77 15 calc(var(--color-hue) + 144));
|
||||
--color-c4b8: lch(88 10 calc(var(--color-hue) + 144));
|
||||
--color-c4b9: lch(99 5 calc(var(--color-hue) + 144));
|
||||
--color-c5b0: lch(0 50 calc(var(--color-hue) + 180));
|
||||
--color-c5b1: lch(11 45 calc(var(--color-hue) + 180));
|
||||
--color-c5b2: lch(22 40 calc(var(--color-hue) + 180));
|
||||
--color-c5b3: lch(33 35 calc(var(--color-hue) + 180));
|
||||
--color-c5b4: lch(44 30 calc(var(--color-hue) + 180));
|
||||
--color-c5b5: lch(55 25 calc(var(--color-hue) + 180));
|
||||
--color-c5b6: lch(66 20 calc(var(--color-hue) + 180));
|
||||
--color-c5b7: lch(77 15 calc(var(--color-hue) + 180));
|
||||
--color-c5b8: lch(88 10 calc(var(--color-hue) + 180));
|
||||
--color-c5b9: lch(99 5 calc(var(--color-hue) + 180));
|
||||
--color-c6b0: lch(0 50 calc(var(--color-hue) + 216));
|
||||
--color-c6b1: lch(11 45 calc(var(--color-hue) + 216));
|
||||
--color-c6b2: lch(22 40 calc(var(--color-hue) + 216));
|
||||
--color-c6b3: lch(33 35 calc(var(--color-hue) + 216));
|
||||
--color-c6b4: lch(44 30 calc(var(--color-hue) + 216));
|
||||
--color-c6b5: lch(55 25 calc(var(--color-hue) + 216));
|
||||
--color-c6b6: lch(66 20 calc(var(--color-hue) + 216));
|
||||
--color-c6b7: lch(77 15 calc(var(--color-hue) + 216));
|
||||
--color-c6b8: lch(88 10 calc(var(--color-hue) + 216));
|
||||
--color-c6b9: lch(99 5 calc(var(--color-hue) + 216));
|
||||
--color-c7b0: lch(0 50 calc(var(--color-hue) + 252));
|
||||
--color-c7b1: lch(11 45 calc(var(--color-hue) + 252));
|
||||
--color-c7b2: lch(22 40 calc(var(--color-hue) + 252));
|
||||
--color-c7b3: lch(33 35 calc(var(--color-hue) + 252));
|
||||
--color-c7b4: lch(44 30 calc(var(--color-hue) + 252));
|
||||
--color-c7b5: lch(55 25 calc(var(--color-hue) + 252));
|
||||
--color-c7b6: lch(66 20 calc(var(--color-hue) + 252));
|
||||
--color-c7b7: lch(77 15 calc(var(--color-hue) + 252));
|
||||
--color-c7b8: lch(88 10 calc(var(--color-hue) + 252));
|
||||
--color-c7b9: lch(99 5 calc(var(--color-hue) + 252));
|
||||
--color-c8b0: lch(0 50 calc(var(--color-hue) + 288));
|
||||
--color-c8b1: lch(11 45 calc(var(--color-hue) + 288));
|
||||
--color-c8b2: lch(22 40 calc(var(--color-hue) + 288));
|
||||
--color-c8b3: lch(33 35 calc(var(--color-hue) + 288));
|
||||
--color-c8b4: lch(44 30 calc(var(--color-hue) + 288));
|
||||
--color-c8b5: lch(55 25 calc(var(--color-hue) + 288));
|
||||
--color-c8b6: lch(66 20 calc(var(--color-hue) + 288));
|
||||
--color-c8b7: lch(77 15 calc(var(--color-hue) + 288));
|
||||
--color-c8b8: lch(88 10 calc(var(--color-hue) + 288));
|
||||
--color-c8b9: lch(99 5 calc(var(--color-hue) + 288));
|
||||
--color-c9b0: lch(0 50 calc(var(--color-hue) + 324));
|
||||
--color-c9b1: lch(11 45 calc(var(--color-hue) + 324));
|
||||
--color-c9b2: lch(22 40 calc(var(--color-hue) + 324));
|
||||
--color-c9b3: lch(33 35 calc(var(--color-hue) + 324));
|
||||
--color-c9b4: lch(44 30 calc(var(--color-hue) + 324));
|
||||
--color-c9b5: lch(55 25 calc(var(--color-hue) + 324));
|
||||
--color-c9b6: lch(66 20 calc(var(--color-hue) + 324));
|
||||
--color-c9b7: lch(77 15 calc(var(--color-hue) + 324));
|
||||
--color-c9b8: lch(88 10 calc(var(--color-hue) + 324));
|
||||
--color-c9b9: lch(99 5 calc(var(--color-hue) + 324));
|
||||
}
|
||||
1152
src/index.html
Normal file
1152
src/index.html
Normal file
File diff suppressed because it is too large
Load diff
2
src/style.css
Normal file
2
src/style.css
Normal file
|
|
@ -0,0 +1,2 @@
|
|||
@import url("./colors.css");
|
||||
@import url("./theme.css");
|
||||
48
src/theme.css
Normal file
48
src/theme.css
Normal file
|
|
@ -0,0 +1,48 @@
|
|||
:root {
|
||||
background-color: var(--color-c0b9);
|
||||
color: var(--color-c0b1);
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: light) {
|
||||
:root {
|
||||
background-color: var(--color-c0b9);
|
||||
color: var(--color-c0b1);
|
||||
}
|
||||
}
|
||||
|
||||
@media (prefers-color-scheme: dark) {
|
||||
:root {
|
||||
background-color: var(--color-c0b0);
|
||||
color: var(--color-c0b8);
|
||||
}
|
||||
}
|
||||
|
||||
[data-prefers-color-scheme="light"] {
|
||||
background-color: var(--color-c0b9);
|
||||
color: var(--color-c0b1);
|
||||
}
|
||||
|
||||
[data-prefers-color-scheme="light"][data-prefers-contrast="more"] {
|
||||
background-color: var(--color-c0b9);
|
||||
color: var(--color-c0b0);
|
||||
}
|
||||
|
||||
[data-prefers-color-scheme="light"][data-prefers-contrast="less"] {
|
||||
background-color: var(--color-c0b9);
|
||||
color: var(--color-c0b2);
|
||||
}
|
||||
|
||||
[data-prefers-color-scheme="dark"] {
|
||||
background-color: var(--color-c0b0);
|
||||
color: var(--color-c0b8);
|
||||
}
|
||||
|
||||
[data-prefers-color-scheme="dark"][data-prefers-contrast="more"] {
|
||||
background-color: var(--color-c0b0);
|
||||
color: var(--color-c0b9);
|
||||
}
|
||||
|
||||
[data-prefers-color-scheme="dark"][data-prefers-contrast="less"] {
|
||||
background-color: var(--color-c0b0);
|
||||
color: var(--color-c0b7);
|
||||
}
|
||||
Loading…
Reference in a new issue