Skip to content

Commit d95c993

Browse files
ryanhaticusryanhaticus
committed
style: spaces instead of tabs
1 parent 7c49ff4 commit d95c993

File tree

2 files changed

+120
-120
lines changed

2 files changed

+120
-120
lines changed

‎src/components/color-palette.tsx

Lines changed: 44 additions & 44 deletions
Original file line numberDiff line numberDiff line change
@@ -9,58 +9,58 @@ const __filename = fileURLToPath(import.meta.url);
99
const __dirname = path.dirname(__filename);
1010

1111
const styles = await fs.readFile(
12-
path.join(__dirname, "../../node_modules/tailwindcss/theme.css"),
13-
"utf-8",
12+
path.join(__dirname, "../../node_modules/tailwindcss/theme.css"),
13+
"utf-8",
1414
);
1515

1616
const colors: Record<string, Record<string, string>> = {};
1717
for (const line of styles.split("\n")) {
18-
if (line.startsWith(" --color-")) {
19-
const [key, value] = line
20-
.split(":")
21-
.map((part) => part.trim().replace(";", ""));
22-
const match = key.match(/^--color-([a-z]+)-(\d+)$/);
18+
if (line.startsWith(" --color-")) {
19+
const [key, value] = line
20+
.split(":")
21+
.map((part) => part.trim().replace(";", ""));
22+
const match = key.match(/^--color-([a-z]+)-(\d+)$/);
2323

24-
if (match) {
25-
const [, group, shade] = match;
24+
if (match) {
25+
const [, group, shade] = match;
2626

27-
if (!colors[group]) {
28-
colors[group] = {};
29-
}
27+
if (!colors[group]) {
28+
colors[group] = {};
29+
}
3030

31-
colors[group][shade] = value;
32-
}
33-
}
31+
colors[group][shade] = value;
32+
}
33+
}
3434
}
3535

3636
export function ColorPalette() {
37-
return (
38-
<div className="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4">
39-
<div className="col-start-2 grid grid-cols-11 justify-items-center gap-1.5 font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] dark:text-white">
40-
<div>50</div>
41-
<div>100</div>
42-
<div>200</div>
43-
<div>300</div>
44-
<div>400</div>
45-
<div>500</div>
46-
<div>600</div>
47-
<div>700</div>
48-
<div>800</div>
49-
<div>900</div>
50-
<div>950</div>
51-
</div>
52-
{Object.entries(colors).map(([key, shades]) => (
53-
<React.Fragment key={key}>
54-
<p className="font-medium text-gray-950 capitalize sm:pr-12 dark:text-white">
55-
{key}
56-
</p>
57-
<div className="grid grid-cols-11 gap-1.5 sm:gap-4">
58-
{Object.keys(shades).map((shade, i) => (
59-
<Color key={i} name={key} shade={shade} />
60-
))}
61-
</div>
62-
</React.Fragment>
63-
))}
64-
</div>
65-
);
37+
return (
38+
<div className="not-prose grid grid-cols-[auto_minmax(0,_1fr)] items-center gap-4">
39+
<div className="col-start-2 grid grid-cols-11 justify-items-center gap-1.5 font-medium text-gray-950 *:rotate-180 *:[writing-mode:vertical-lr] sm:gap-4 sm:*:rotate-0 sm:*:[writing-mode:horizontal-tb] dark:text-white">
40+
<div>50</div>
41+
<div>100</div>
42+
<div>200</div>
43+
<div>300</div>
44+
<div>400</div>
45+
<div>500</div>
46+
<div>600</div>
47+
<div>700</div>
48+
<div>800</div>
49+
<div>900</div>
50+
<div>950</div>
51+
</div>
52+
{Object.entries(colors).map(([key, shades]) => (
53+
<React.Fragment key={key}>
54+
<p className="font-medium text-gray-950 capitalize sm:pr-12 dark:text-white">
55+
{key}
56+
</p>
57+
<div className="grid grid-cols-11 gap-1.5 sm:gap-4">
58+
{Object.keys(shades).map((shade, i) => (
59+
<Color key={i} name={key} shade={shade} />
60+
))}
61+
</div>
62+
</React.Fragment>
63+
))}
64+
</div>
65+
);
6666
}

‎src/components/color.tsx

Lines changed: 76 additions & 76 deletions
Original file line numberDiff line numberDiff line change
@@ -4,83 +4,83 @@ import { oklch2hex } from "colorizr";
44
import { useEffect, useRef, useState } from "react";
55
import clsx from "clsx";
66
import {
7-
Button,
8-
Tooltip,
9-
TooltipPanel,
10-
TooltipTrigger,
7+
Button,
8+
Tooltip,
9+
TooltipPanel,
10+
TooltipTrigger,
1111
} from "@headlessui/react";
1212

1313
export function Color({ name, shade }: { name: string; shade: string }) {
14-
const [justCopied, setJustCopied] = useState(false);
15-
16-
const buttonRef = useRef<HTMLButtonElement>(null);
17-
18-
const colorVariableName = `--color-${name}-${shade}`;
19-
20-
const copyHexToClipboard = () => {
21-
if (!buttonRef.current) {
22-
return;
23-
}
24-
25-
const styleValue = buttonRef.current
26-
.computedStyleMap()
27-
.get(colorVariableName);
28-
29-
if (!styleValue) {
30-
return;
31-
}
32-
33-
const oklchWithCSSFunctionalNotation = styleValue.toString();
34-
35-
// oklch(0.808 0.114 19.571) to 0.808 0.114 19.571
36-
const oklch = oklchWithCSSFunctionalNotation.slice(6, -1);
37-
38-
// 0.808 0.114 19.571 to [0.808, 0.114, 19.571]
39-
const oklchTuple = oklch.split(" ").map(Number) as [number, number, number];
40-
41-
const hex = oklch2hex(oklchTuple);
42-
43-
navigator.clipboard.writeText(hex);
44-
45-
setJustCopied(true);
46-
};
47-
48-
useEffect(() => {
49-
const timeout = setTimeout(() => {
50-
if (!justCopied) {
51-
return;
52-
}
53-
54-
setJustCopied(false);
55-
}, 1300);
56-
57-
return () => clearTimeout(timeout);
58-
}, [justCopied]);
59-
60-
return (
61-
<Tooltip as="div" showDelayMs={100} hideDelayMs={0} className="relative">
62-
<TooltipTrigger>
63-
<Button
64-
ref={buttonRef}
65-
type="button"
66-
onClick={copyHexToClipboard}
67-
onTouchEnd={copyHexToClipboard}
68-
style={{ backgroundColor: `var(${colorVariableName})` }}
69-
className={clsx(
70-
"h-full w-full cursor-pointer aspect-1/1 rounded-sm outline -outline-offset-1 outline-black/10 sm:rounded-md dark:outline-white/10 flex items-center justify-center",
71-
)}
72-
/>
73-
</TooltipTrigger>
74-
<TooltipPanel
75-
as="div"
76-
anchor="top"
77-
className="pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0"
78-
>
79-
{justCopied ? "Copied!" : "Click to copy"}
80-
</TooltipPanel>
81-
</Tooltip>
82-
);
83-
/*
84-
85-
*/
14+
const [justCopied, setJustCopied] = useState(false);
15+
16+
const buttonRef = useRef<HTMLButtonElement>(null);
17+
18+
const colorVariableName = `--color-${name}-${shade}`;
19+
20+
const copyHexToClipboard = () => {
21+
if (!buttonRef.current) {
22+
return;
23+
}
24+
25+
const styleValue = buttonRef.current
26+
.computedStyleMap()
27+
.get(colorVariableName);
28+
29+
if (!styleValue) {
30+
return;
31+
}
32+
33+
const oklchWithCSSFunctionalNotation = styleValue.toString();
34+
35+
// oklch(0.808 0.114 19.571) to 0.808 0.114 19.571
36+
const oklch = oklchWithCSSFunctionalNotation.slice(6, -1);
37+
38+
// 0.808 0.114 19.571 to [0.808, 0.114, 19.571]
39+
const oklchTuple = oklch.split(" ").map(Number) as [number, number, number];
40+
41+
const hex = oklch2hex(oklchTuple);
42+
43+
navigator.clipboard.writeText(hex);
44+
45+
setJustCopied(true);
46+
};
47+
48+
useEffect(() => {
49+
const timeout = setTimeout(() => {
50+
if (!justCopied) {
51+
return;
52+
}
53+
54+
setJustCopied(false);
55+
}, 1300);
56+
57+
return () => clearTimeout(timeout);
58+
}, [justCopied]);
59+
60+
return (
61+
<Tooltip as="div" showDelayMs={100} hideDelayMs={0} className="relative">
62+
<TooltipTrigger>
63+
<Button
64+
ref={buttonRef}
65+
type="button"
66+
onClick={copyHexToClipboard}
67+
onTouchEnd={copyHexToClipboard}
68+
style={{ backgroundColor: `var(${colorVariableName})` }}
69+
className={clsx(
70+
"h-full w-full cursor-pointer aspect-1/1 rounded-sm outline -outline-offset-1 outline-black/10 sm:rounded-md dark:outline-white/10 flex items-center justify-center",
71+
)}
72+
/>
73+
</TooltipTrigger>
74+
<TooltipPanel
75+
as="div"
76+
anchor="top"
77+
className="pointer-events-none z-10 translate-y-2 rounded-full border border-gray-950 bg-gray-950/90 py-0.5 pr-2 pb-1 pl-3 text-center font-mono text-xs/6 font-medium whitespace-nowrap text-white opacity-100 inset-ring inset-ring-white/10 transition-[opacity] starting:opacity-0"
78+
>
79+
{justCopied ? "Copied!" : "Click to copy"}
80+
</TooltipPanel>
81+
</Tooltip>
82+
);
83+
/*
84+
85+
*/
8686
}

0 commit comments

Comments
 (0)