feat: switch to mist color from tailwind

app/components/Tabs.tsx

@@ -1,90 +1,85 @@
-import { useRef } from 'react';
-import {
-	AriaTabListProps,
-	AriaTabPanelProps,
-	useTab,
-	useTabList,
-	useTabPanel,
-} from 'react-aria';
-import { Item, Node, TabListState, useTabListState } from 'react-stately';
-import cn from '~/utils/cn';
+import { useRef } from "react";
+import { AriaTabListProps, AriaTabPanelProps, useTab, useTabList, useTabPanel } from "react-aria";
+import { Item, Node, TabListState, useTabListState } from "react-stately";
+
+import cn from "~/utils/cn";
 
 export interface TabsProps extends AriaTabListProps<object> {
-	label: string;
-	className?: string;
+  label: string;
+  className?: string;
 }
 
 function Tabs({ label, className, ...props }: TabsProps) {
-	const state = useTabListState(props);
-	const ref = useRef<HTMLDivElement | null>(null);
+  const state = useTabListState(props);
+  const ref = useRef<HTMLDivElement | null>(null);
 
-	const { tabListProps } = useTabList(props, state, ref);
-	return (
-		<div className={cn('flex flex-col', className)}>
-			<div
-				{...tabListProps}
-				className={cn(
-					'flex items-center rounded-t-xl w-fit max-w-full overflow-x-auto',
-					'border-headplane-100 dark:border-headplane-800',
-					'border-t border-x',
-				)}
-				ref={ref}
-			>
-				{[...state.collection].map((item) => (
-					<Tab item={item} key={item.key} state={state} />
-				))}
-			</div>
-			<TabsPanel key={state.selectedItem?.key} state={state} />
-		</div>
-	);
+  const { tabListProps } = useTabList(props, state, ref);
+  return (
+    <div className={cn("flex flex-col", className)}>
+      <div
+        {...tabListProps}
+        className={cn(
+          "flex items-center rounded-t-lg w-fit max-w-full overflow-x-auto",
+          "border-mist-100 dark:border-mist-800",
+          "border-t border-x",
+        )}
+        ref={ref}
+      >
+        {[...state.collection].map((item) => (
+          <Tab item={item} key={item.key} state={state} />
+        ))}
+      </div>
+      <TabsPanel key={state.selectedItem?.key} state={state} />
+    </div>
+  );
 }
 
 export interface TabsTabProps {
-	item: Node<object>;
-	state: TabListState<object>;
+  item: Node<object>;
+  state: TabListState<object>;
 }
 
 function Tab({ item, state }: TabsTabProps) {
-	const { key, rendered } = item;
-	const ref = useRef<HTMLDivElement | null>(null);
+  const { key, rendered } = item;
+  const ref = useRef<HTMLDivElement | null>(null);
 
-	const { tabProps } = useTab({ key }, state, ref);
-	return (
-		<div
-			{...tabProps}
-			className={cn(
-				'pl-2 pr-3 py-2.5',
-				'aria-selected:bg-headplane-100 dark:aria-selected:bg-headplane-950',
-				'focus:outline-hidden focus:ring-3 z-10',
-				'border-r border-headplane-100 dark:border-headplane-800',
-				'first:rounded-tl-xl last:rounded-tr-xl last:border-r-0',
-			)}
-			ref={ref}
-		>
-			{rendered}
-		</div>
-	);
+  const { tabProps } = useTab({ key }, state, ref);
+  return (
+    <div
+      {...tabProps}
+      className={cn(
+        "pl-2 pr-3 py-2.5",
+        "aria-selected:bg-mist-100 dark:aria-selected:bg-mist-950",
+        "focus:outline-hidden focus:ring-3 z-10",
+        "border-r border-mist-100 dark:border-mist-800",
+        "first:rounded-tl-lg last:rounded-tr-lg last:border-r-0",
+      )}
+      ref={ref}
+    >
+      {rendered}
+    </div>
+  );
 }
 
 export interface TabsPanelProps extends AriaTabPanelProps {
-	state: TabListState<object>;
+  state: TabListState<object>;
 }
 
 function TabsPanel({ state, ...props }: TabsPanelProps) {
-	const ref = useRef<HTMLDivElement | null>(null);
-	const { tabPanelProps } = useTabPanel(props, state, ref);
-	return (
-		<div
-			{...tabPanelProps}
-			className={cn(
-				'w-full overflow-clip rounded-b-xl rounded-r-xl',
-				'border border-headplane-100 dark:border-headplane-800',
-			)}
-			ref={ref}
-		>
-			{state.selectedItem?.props.children}
-		</div>
-	);
+  const ref = useRef<HTMLDivElement | null>(null);
+  const { tabPanelProps } = useTabPanel(props, state, ref);
+  return (
+    <div
+      {...tabPanelProps}
+      className={cn(
+        "w-full overflow-clip rounded-b-lg rounded-r-lg",
+        "border border-mist-100 dark:border-mist-800",
+      )}
+      ref={ref}
+    >
+      {state.selectedItem?.props.children}
+    </div>
+  );
 }
 
 export default Object.assign(Tabs, { Item });