feat: switch to mist color from tailwind

2026-08-25 03:46:48 +00:00 · 2026-03-08 23:48:03 -04:00
parent df5e04f239
commit 0ce411e92b
49 changed files with 2738 additions and 2991 deletions
@@ -1,43 +1,45 @@
-import React, { useRef } from 'react';
-import { type AriaButtonOptions, useButton } from 'react-aria';
-import cn from '~/utils/cn';
+import React, { useRef } from "react";
+import { type AriaButtonOptions, useButton } from "react-aria";

-export interface ButtonProps extends AriaButtonOptions<'button'> {
-	variant?: 'heavy' | 'light' | 'danger';
-	className?: string;
-	children?: React.ReactNode;
-	ref?: React.RefObject<HTMLButtonElement | null>;
+import cn from "~/utils/cn";
+
+export interface ButtonProps extends AriaButtonOptions<"button"> {
+  variant?: "heavy" | "light" | "danger";
+  className?: string;
+  children?: React.ReactNode;
+  ref?: React.RefObject<HTMLButtonElement | null>;
 }

-export default function Button({ variant = 'light', ...props }: ButtonProps) {
-	// In case the button is used as a trigger ref
-	const ref = props.ref ?? useRef<HTMLButtonElement | null>(null);
-	const { buttonProps } = useButton(props, ref);
+export default function Button({ variant = "light", ...props }: ButtonProps) {
+  // In case the button is used as a trigger ref
+  const ref = props.ref ?? useRef<HTMLButtonElement | null>(null);
+  const { buttonProps } = useButton(props, ref);

-	return (
-		<button
-			ref={ref}
-			{...buttonProps}
-			className={cn(
-				'w-fit text-sm rounded-xl px-3 py-2',
-				'focus:outline-hidden focus:ring-3',
-				props.isDisabled && 'opacity-60 cursor-not-allowed',
-				...(variant === 'heavy'
-					? [
-							'bg-headplane-900 dark:bg-headplane-50 font-semibold',
-							'hover:bg-headplane-900/90 dark:hover:bg-headplane-50/90',
-							'text-headplane-200 dark:text-headplane-800',
-						]
-					: variant === 'danger'
-						? ['bg-red-500 text-white font-semibold', 'hover:bg-red-500/90']
-						: [
-								'bg-headplane-100 dark:bg-headplane-700/30 font-medium',
-								'hover:bg-headplane-200/90 dark:hover:bg-headplane-800/30',
-							]),
-				props.className,
-			)}
-		>
-			{props.children}
-		</button>
-	);
+  return (
+    <button
+      ref={ref}
+      {...buttonProps}
+      className={cn(
+        "w-fit text-sm rounded-md px-3 py-2",
+        "focus:outline-hidden focus:ring-3",
+        props.isDisabled && "opacity-60 cursor-not-allowed",
+        ...(variant === "heavy"
+          ? [
+              "bg-mist-900 dark:bg-mist-50 font-semibold",
+              "hover:bg-mist-900/90 dark:hover:bg-mist-50/90",
+              "text-mist-200 dark:text-mist-800",
+            ]
+          : variant === "danger"
+            ? ["bg-red-500 text-white font-semibold", "hover:bg-red-500/90"]
+            : [
+                "bg-mist-100 dark:bg-mist-800/50 font-medium",
+                "border border-mist-200 dark:border-mist-700",
+                "hover:bg-mist-200/90 dark:hover:bg-mist-700/50",
+              ]),
+        props.className,
+      )}
+    >
+      {props.children}
+    </button>
+  );
 }