mirror of
https://github.com/OpenHands/OpenHands.git
synced 2025-12-26 05:48:36 +08:00
78 lines
2.1 KiB
TypeScript
78 lines
2.1 KiB
TypeScript
import type { ComponentVariant } from "../../shared/types";
|
|
import { cn } from "../../shared/utils/cn";
|
|
|
|
type ButtonStyle = {
|
|
button: string;
|
|
icon: string;
|
|
text: string;
|
|
};
|
|
|
|
export const buttonStyles: Record<ComponentVariant, ButtonStyle> = {
|
|
primary: {
|
|
button: cn([
|
|
"ring-1 ring-solid ring-primary-500 rounded-full bg-grey-950",
|
|
// hover modifier
|
|
"enabled:hover:bg-grey-900 enabled:hover:ring-[1.5px]",
|
|
// focus modifier
|
|
"enabled:hover:bg-grey-900 enabled:focus:ring-[1.5px]",
|
|
// active modifier
|
|
"enabled:active:ring-1",
|
|
// disabled modifier
|
|
"disabled:opacity-50",
|
|
]),
|
|
icon: cn(["text-primary-500"]),
|
|
text: cn([
|
|
"text-primary-500",
|
|
// hover modifier
|
|
"group-enabled:group-hover:font-semibold",
|
|
// focus modifier
|
|
"group-enabled:group-focus:font-semibold",
|
|
]),
|
|
},
|
|
secondary: {
|
|
button: cn([
|
|
"ring-1 ring-solid ring-light-neutral-300 rounded-full bg-light-neutral-950",
|
|
// hover modifier
|
|
"enabled:hover:bg-light-neutral-900 enabled:hover:ring-[1.5px]",
|
|
// focus modifier
|
|
"enabled:focus:bg-light-neutral-900 enabled:focus:ring-[1.5px]",
|
|
// active modifier
|
|
"enabled:active:ring-1",
|
|
// disabled modifier
|
|
"disabled:opacity-50",
|
|
]),
|
|
icon: cn(["text-light-neutral-300"]),
|
|
text: cn([
|
|
"text-light-neutral-300",
|
|
// hover modifier
|
|
"group-enabled:group-hover:font-semibold",
|
|
// focus modifier
|
|
"group-enabled:group-focus:font-semibold",
|
|
]),
|
|
},
|
|
tertiary: {
|
|
button: cn([
|
|
"rounded-full",
|
|
// hover modifier
|
|
"enabled:hover:bg-grey-900",
|
|
// focus modifier
|
|
"enabled:focus:bg-grey-900",
|
|
// active modifier
|
|
"enabled:active:bg-grey-970",
|
|
// disabled modifier
|
|
"disabled:opacity-50",
|
|
]),
|
|
icon: cn(["text-primary-500"]),
|
|
text: cn([
|
|
"text-primary-500 underline",
|
|
// hover modifier
|
|
"group-enabled:group-hover:font-semibold",
|
|
// focus modifier
|
|
"group-enabled:group-focus:font-semibold",
|
|
|
|
// disabled modifier
|
|
"group-disabled:no-underline",
|
|
]),
|
|
},
|
|
};
|