Rich Button

1import * as React from "react";
2import { Slot } from "@radix-ui/react-slot";
3import { cn } from "@/lib/utils";
4 
5type Color =
6  | "default"
7  | "blue"
8  | "purple"
9  | "pink"
10  | "red"
11  | "orange"
12  | "yellow"
13  | "green"
14  | "teal"
15  | "cyan"
16  | "indigo"
17  | "violet"
18  | "rose"
19  | "amber"
20  | "lime"
21  | "sky"
22  | "slate"
23  | "gray"
24  | "zinc"
25  | "neutral"
26  | "stone"
27  | "fuchsia"
28  | "emerald";
29 
30type SizeVariant = "sm" | "default" | "lg";
31 
32interface RichButtonProps
33  extends React.ButtonHTMLAttributes<HTMLButtonElement> {
34  children: React.ReactNode;
35  color?: Color;
36  size?: SizeVariant;
37  className?: string;
38  asChild?: boolean;
39}
40 
41const colorMap: Record<Color, string> = {
42  default:
43    "from-zinc-900/85 to-zinc-900 dark:from-zinc-100/85 dark:to-zinc-100",
44  emerald: "from-emerald-600/85 to-emerald-600 dark:from-emerald-600/75",
45  blue: "from-blue-600/85 to-blue-600 dark:from-blue-600/75",
46  purple: "from-purple-600/85 to-purple-600 dark:from-purple-600/75",
47  pink: "from-pink-600/85 to-pink-600 dark:from-pink-600/75",
48  red: "from-red-600/85 to-red-600 dark:from-red-600/75",
49  orange: "from-orange-600/85 to-orange-600 dark:from-orange-600/75",
50  yellow: "from-yellow-600/85 to-yellow-600 dark:from-yellow-600/75",
51  green: "from-green-600/85 to-green-600 dark:from-green-600/75",
52  teal: "from-teal-600/85 to-teal-600 dark:from-teal-600/75",
53  cyan: "from-cyan-600/85 to-cyan-600 dark:from-cyan-600/75",
54  indigo: "from-indigo-600/85 to-indigo-600 dark:from-indigo-600/75",
55  violet: "from-violet-600/85 to-violet-600 dark:from-violet-600/75",
56  rose: "from-rose-600/85 to-rose-600 dark:from-rose-600/75",
57  amber: "from-amber-600/85 to-amber-600 dark:from-amber-600/75",
58  lime: "from-lime-600/85 to-lime-600 dark:from-lime-600/75",
59  sky: "from-sky-600/85 to-sky-600 dark:from-sky-600/75",
60  slate: "from-slate-600/85 to-slate-600 dark:from-slate-600/75",
61  gray: "from-gray-600/85 to-gray-600 dark:from-gray-600/75",
62  zinc: "from-zinc-700/85 to-zinc-700 dark:from-zinc-700/75",
63  neutral: "from-neutral-600/85 to-neutral-600 dark:from-neutral-600/75",
64  stone: "from-stone-600/85 to-stone-600 dark:from-stone-600/75",
65  fuchsia: "from-fuchsia-600/85 to-fuchsia-600 dark:from-fuchsia-600/75",
66};
67 
68const textShadowMap: Record<Color, string> = {
69  default:
70    "[text-shadow:0_1px_0_rgb(0,0,0)] dark:[text-shadow:0_1px_0_rgb(255,255,255)]",
71  emerald: "[text-shadow:0_1px_0_var(--color-emerald-800)]",
72  blue: "[text-shadow:0_1px_0_var(--color-blue-800)]",
73// … truncated