feat(button): Success variant (#96)

pancakeswap · Dec 16, 2020 · 8aae7be · 8aae7be
1 parent cb6c5f5
commit 8aae7be
Show file tree

Hide file tree

Showing 2 changed files with 15 additions and 1 deletion.
diff --git a/src/components/Button/theme.ts b/src/components/Button/theme.ts
@@ -1,7 +1,7 @@
 import { ButtonTheme, variants } from "./types";
 import { lightColors, darkColors } from "../../theme/colors";
 
-const { PRIMARY, SECONDARY, TERTIARY, TEXT, DANGER, SUBTLE } = variants;
+const { PRIMARY, SECONDARY, TERTIARY, TEXT, DANGER, SUBTLE, SUCCESS } = variants;
 
 export const light: ButtonTheme = {
   [PRIMARY]: {
@@ -64,6 +64,16 @@ export const light: ButtonTheme = {
     boxShadowActive: "none",
     color: "#FFFFFF",
   },
+  [SUCCESS]: {
+    background: lightColors.success,
+    backgroundActive: `${lightColors.success}D9`, // 70% opacity
+    backgroundHover: `${lightColors.success}B3`, // 85% opacity
+    border: 0,
+    borderColorHover: "currentColor",
+    boxShadow: "none",
+    boxShadowActive: "none",
+    color: "#FFFFFF",
+  },
 };
 
 export const dark: ButtonTheme = {
@@ -90,4 +100,7 @@ export const dark: ButtonTheme = {
   [SUBTLE]: {
     ...light.subtle,
   },
+  [SUCCESS]: {
+    ...light.success,
+  },
 };
diff --git a/src/components/Button/types.ts b/src/components/Button/types.ts
@@ -14,6 +14,7 @@ export const variants = {
   TEXT: "text",
   DANGER: "danger",
   SUBTLE: "subtle",
+  SUCCESS: "success",
 } as const;
 
 export type Sizes = typeof sizes[keyof typeof sizes];