feat: switch to mist color from tailwind

app/components/Code.tsx

@@ -1,50 +1,51 @@
-import { Check, Copy } from 'lucide-react';
-import { HTMLProps } from 'react';
-import cn from '~/utils/cn';
-import toast from '~/utils/toast';
+import { Check, Copy } from "lucide-react";
+import { HTMLProps } from "react";
+
+import cn from "~/utils/cn";
+import toast from "~/utils/toast";
 
 export interface CodeProps extends HTMLProps<HTMLSpanElement> {
-	isCopyable?: boolean;
-	children: string | string[] | number;
+  isCopyable?: boolean;
+  children: string | string[] | number;
 }
 
 export default function Code({ isCopyable, children, className }: CodeProps) {
-	return (
-		<code
-			className={cn(
-				'bg-headplane-100 dark:bg-headplane-800 px-1 py-0.5 font-mono',
-				'rounded-lg focus-within:outline-hidden focus-within:ring-2',
-				isCopyable && 'relative pr-7',
-				className,
-			)}
-		>
-			{children}
-			{isCopyable && (
-				<button
-					className="bottom-0 right-0 absolute"
-					onClick={async (event) => {
-						const text = Array.isArray(children) ? children.join('') : children;
+  return (
+    <code
+      className={cn(
+        "bg-mist-100 dark:bg-mist-800 px-1 py-0.5 font-mono",
+        "rounded-sm focus-within:outline-hidden focus-within:ring-2",
+        isCopyable && "relative pr-7",
+        className,
+      )}
+    >
+      {children}
+      {isCopyable && (
+        <button
+          className="absolute right-0 bottom-0"
+          onClick={async (event) => {
+            const text = Array.isArray(children) ? children.join("") : children;
 
-						const svgs = event.currentTarget.querySelectorAll('svg');
-						for (const svg of svgs) {
-							svg.toggleAttribute('data-copied', true);
-						}
+            const svgs = event.currentTarget.querySelectorAll("svg");
+            for (const svg of svgs) {
+              svg.toggleAttribute("data-copied", true);
+            }
 
-						await navigator.clipboard.writeText(text);
-						toast('Copied to clipboard');
+            await navigator.clipboard.writeText(text);
+            toast("Copied to clipboard");
 
-						setTimeout(() => {
-							for (const svg of svgs) {
-								svg.toggleAttribute('data-copied', false);
-							}
-						}, 1000);
-					}}
-					type="button"
-				>
-					<Check className="h-4.5 w-4.5 p-1 hidden data-copied:block" />
-					<Copy className="h-4.5 w-4.5 p-1 block data-copied:hidden" />
-				</button>
-			)}
-		</code>
-	);
+            setTimeout(() => {
+              for (const svg of svgs) {
+                svg.toggleAttribute("data-copied", false);
+              }
+            }, 1000);
+          }}
+          type="button"
+        >
+          <Check className="hidden h-4.5 w-4.5 p-1 data-copied:block" />
+          <Copy className="block h-4.5 w-4.5 p-1 data-copied:hidden" />
+        </button>
+      )}
+    </code>
+  );
 }