theme: add new tertiary button variant

This commit is contained in:
Abdullah Atta
2025-08-04 13:25:28 +05:00
parent 25889192c4
commit b82e9598bd

View File

@@ -48,7 +48,7 @@ export const createButtonVariant = (
textOverflow: "ellipsis",
whiteSpace: "nowrap",
transition: "transform 50ms ease-out",
transition: "transform 50ms ease-out, background 100ms ease-out",
":hover:not(:disabled):not(:active)": {
bg: background,
// filter: "brightness(90%)",
@@ -84,6 +84,17 @@ const secondary: ThemeUIStyleObject = createButtonVariant(
}
);
const tertiary: ThemeUIStyleObject = {
...createButtonVariant("transparent", "paragraph", {
hover: { opacity: 0.8 },
active: { opacity: 1 }
}),
p: 0,
m: 0,
px: 0,
py: 0
};
const accent = createButtonVariant("accent", "accentForeground", {
hover: { bg: alpha("accent", 0.9) },
active: { bg: alpha("accent", 0.8) }
@@ -138,6 +149,7 @@ const menuItem: ThemeUIStyleObject = {
export const buttonVariants = {
primary,
secondary,
tertiary,
accent,
accentSecondary,