primary button styled

Indotem-Salddud · Feb 15, 2022 · 3a89959 · 3a89959
1 parent a6c318c
commit 3a89959
Show file tree

Hide file tree

Showing 2 changed files with 46 additions and 20 deletions.
diff --git a/src/common/Tokens.ts b/src/common/Tokens.ts
@@ -1,30 +1,43 @@
 export const Tokens = {
   Colors: {
     Buttons: {
-      Primary: "#7F516A",
-      Secondary: "#000",
+      Primary:"#BF4085",
+      PrimaryPressed:"#CB659C",
+      PrimaryHover:"#A83875",
+      PrimaryDisabled:"#D192B4"
     },
   },
   Borders: {
     Radius: {
-      PrimaryR: "10px"
+      Medium: "10px"
     },
   },
   Constraints: {
     Margin: {
       XSmall: "",
       Small: "",
       MediumSmall: "",
+    }
+  },
+  Text: {
+    Weight: "bold",
+    Size: "20px",
+    Color: {
+      Primary: "#FFFFFF",
+      PrimaryDisabled: "#F7F7FC"
     },
   },
   Padding: {
-      PrimaryP: "16px 40px"
-    },
+    Medium: "16px 40px"
+  },
   Height:{
-      Large:"66px"
-    },
+    Large:"66px"
+  },
   Width:{
-      Large:"345px"
-    }
-
-};
+    Large:"345px"
+  },
+   BoxShadow:{
+    Medium:"0px 4px 4px rgba(0, 0, 0, 0.08), inset 0px 4px 4px rgba(0, 0, 0, 0.16)"
+  },
+
+};
diff --git a/src/components/Buttons/Primary/ButtonPrimaryStyled.ts b/src/components/Buttons/Primary/ButtonPrimaryStyled.ts
@@ -1,14 +1,27 @@
 import styled from "styled-components";
 import { Tokens } from "../../../common/Tokens";
 
-// * Styled primary button
-export const PrimaryButtonStyled = styled.button`
+// * Styled Primary button
+export const PrimaryButtonStyled = styled.button` 
   border: none;
-  background-color: ${Tokens.Colors.Buttons.Primary};
-  color: #fff;
-  border-radius: ${Tokens.Borders.Radius.PrimaryR};
-  padding: ${Tokens.Padding.PrimaryP};
+  background: ${Tokens.Colors.Buttons.Primary};
+  font-size: ${Tokens.Text.Size};
+  font-weight: ${Tokens.Text.Weight};
+  color: ${Tokens.Text.Color.Primary};
+  padding: ${Tokens.Padding.Medium};
   height: ${Tokens.Height.Large};
-  width: ${Tokens.Width.Large}
-
-`;
+  width: ${Tokens.Width.Large};
+  border-radius: ${Tokens.Borders.Radius.Medium};
+  &:hover{
+      background: ${Tokens.Colors.Buttons.PrimaryHover};
+      color: ${Tokens.Text.Color.Primary};
+      }
+  &:active{
+      background: ${Tokens.Colors.Buttons.PrimaryPressed};
+      color: ${Tokens.Text.Color.Primary};
+      box-shadow: ${Tokens.BoxShadow.Medium};
+    }
+  &:disabled{
+      color: ${Tokens.Text.Color.PrimaryDisabled};
+   }
+`;