Add hover styles to button. Make input use shared variables for padding, border-radius

src/App.tsx

@@ -48,7 +48,7 @@ function App() {
         <input type="text" name="testInput2" style={{ width: "100%" }} />
         <Spacer />
         <SpaceBetweenContainer>
-          <Button variant="secondary" onClick={() => {}}>
+          <Button variant="primary" onClick={() => {}}>
             Hello World
           </Button>
           <Button variant="secondary" onClick={() => {}}>

src/shared/styles.js

@@ -23,4 +23,6 @@ export const typography = {
 
 export const input = {
   padding: "2rem",
+  borderRadius: "12px",
+  fontSize: "1.6rem",
 };

src/stories/Button.tsx

@@ -1,6 +1,7 @@
 import React, { FC, ReactNode } from "react";
-import styled from "styled-components";
+import styled, { css } from "styled-components";
 import CSS from "csstype";
+import { darken } from "polished";
 
 import { color, typography } from "../shared/styles";
 
@@ -41,12 +42,29 @@ const StyledButton = styled.button<ButtonProps>`
   transition: all 150ms ease-out;
   transform: translate3d(0, 0, 0);
 
-  color: ${(props) =>
-    props.variant === "primary" ? color.white : color.black};
-  background-color: ${(props) =>
-    props.variant === "primary" ? color.primary : color.secondary};
-
   &:hover {
     transform: translateY(-2px);
   }
+
+  ${(props) =>
+    props.variant === "primary" &&
+    css`
+      color: ${color.white};
+      background-color: ${color.primary};
+
+      &:hover {
+        background-color: ${darken(0.05, color.primary)};
+      }
+    `}
+
+  ${(props) =>
+    props.variant === "secondary" &&
+    css`
+      color: ${color.black};
+      background-color: ${color.secondary};
+
+      &:hover {
+        background-color: ${darken(0.1, color.secondary)};
+      }
+    `}
 `;

src/stories/Input.tsx

@@ -45,12 +45,12 @@ const Input: FC<InputProps> = ({
 export default Input;
 
 const StyledInput = styled.input<InputProps>`
-  border-radius: 12px;
+  border-radius: ${input.borderRadius};
   border: none;
   padding: ${input.padding};
   width: 100%;
 
-  font-size: 1.6rem;
+  font-size: ${input.fontSize};
   font-family: ${typography.primary};
   font-weight: ${typography.weight.regular};