diff --git a/src/components/Card/index.stories.tsx b/src/components/Card/index.stories.tsx
index c953c2c58..af24c8aae 100644
--- a/src/components/Card/index.stories.tsx
+++ b/src/components/Card/index.stories.tsx
@@ -20,10 +20,19 @@ export default {
export const Default: React.FC = () => {
return (
- <>
+
Card
- >
+
+ Active Card
+
+
+ Success Card
+
+
+ Warning Card
+
+
);
};
diff --git a/src/components/Card/index.tsx b/src/components/Card/index.tsx
index 0afb6e378..0d833a45c 100644
--- a/src/components/Card/index.tsx
+++ b/src/components/Card/index.tsx
@@ -1,16 +1,44 @@
import styled, { DefaultTheme } from "styled-components";
interface CardProps {
+ isActive?: boolean;
+ isSuccess?: boolean;
+ isWarning?: boolean;
theme: DefaultTheme;
}
+/**
+ * Priority: Warning --> Success --> Active
+ */
+const getBoxShadow = ({ isActive, isSuccess, isWarning, theme }: CardProps) => {
+ if (isWarning) {
+ return theme.card.boxShadowWarning;
+ }
+
+ if (isSuccess) {
+ return theme.card.boxShadowSuccess;
+ }
+
+ if (isActive) {
+ return theme.card.boxShadowActive;
+ }
+
+ return theme.card.boxShadow;
+};
+
const Card = styled.div`
background-color: ${({ theme }) => theme.card.background};
border: ${({ theme }) => theme.card.boxShadow};
border-radius: 32px;
- box-shadow: ${({ theme }) => theme.shadows.level1};
+ box-shadow: ${getBoxShadow};
color: ${({ theme }) => theme.colors.text};
padding: 24px;
`;
+Card.defaultProps = {
+ isActive: false,
+ isSuccess: false,
+ isWarning: false,
+};
+
export default Card;
diff --git a/src/components/Card/theme.ts b/src/components/Card/theme.ts
index 18e03e6d8..6c11bfebd 100644
--- a/src/components/Card/theme.ts
+++ b/src/components/Card/theme.ts
@@ -1,11 +1,18 @@
+import shadows from "../../theme/shadows";
import { CardTheme } from "./types";
export const light: CardTheme = {
background: "#FFFFFF",
- boxShadow: "1px solid rgba(14, 14, 44, 0.05)",
+ boxShadow: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+ boxShadowActive: shadows.active,
+ boxShadowSuccess: shadows.success,
+ boxShadowWarning: shadows.warning,
};
export const dark: CardTheme = {
background: "#2B223E",
- boxShadow: "1px solid rgba(14, 14, 44, 0.05)",
+ boxShadow: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+ boxShadowActive: shadows.active,
+ boxShadowSuccess: shadows.success,
+ boxShadowWarning: shadows.warning,
};
diff --git a/src/components/Card/types.ts b/src/components/Card/types.ts
index 7610120fb..e121a4f54 100644
--- a/src/components/Card/types.ts
+++ b/src/components/Card/types.ts
@@ -1,4 +1,7 @@
export type CardTheme = {
background: string;
boxShadow: string;
+ boxShadowActive: string;
+ boxShadowSuccess: string;
+ boxShadowWarning: string;
};
diff --git a/src/styled.d.ts b/src/styled.d.ts
index 7e01248bd..98ca4d9ce 100644
--- a/src/styled.d.ts
+++ b/src/styled.d.ts
@@ -13,6 +13,13 @@ export type MediaQueries = {
xl: string;
};
+export type Shadows = {
+ level1: string;
+ active: string;
+ success: string;
+ warning: string;
+};
+
export type Colors = {
primary: string;
primaryBright: string;
@@ -41,8 +48,6 @@ declare module "styled-components" {
breakpoints: Breakpoints;
mediaQueries: MediaQueries;
};
- shadows: {
- level1: string;
- };
+ shadows: Shadows;
}
}
diff --git a/src/theme/dark.ts b/src/theme/dark.ts
index 5b36b45bd..0bc4a423d 100644
--- a/src/theme/dark.ts
+++ b/src/theme/dark.ts
@@ -1,5 +1,6 @@
import { DefaultTheme } from "styled-components";
import mediaQueries, { breakpoints } from "./mediaQueries";
+import shadows from "./shadows";
import { dark as darkButton } from "../components/Button/theme";
import { dark as darkCard } from "../components/Card/theme";
import { dark as darkTag } from "../components/Tag/theme";
@@ -16,6 +17,7 @@ const darkTheme: DefaultTheme = {
},
shadows: {
level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+ ...shadows,
},
tag: darkTag,
};
diff --git a/src/theme/light.ts b/src/theme/light.ts
index 7dfcd8820..901c3df70 100644
--- a/src/theme/light.ts
+++ b/src/theme/light.ts
@@ -1,5 +1,6 @@
import { DefaultTheme } from "styled-components";
import mediaQueries, { breakpoints } from "./mediaQueries";
+import shadows from "./shadows";
import { light as lightButton } from "../components/Button/theme";
import { light as lightCard } from "../components/Card/theme";
import { light as lightTag } from "../components/Tag/theme";
@@ -16,6 +17,7 @@ const lightTheme: DefaultTheme = {
},
shadows: {
level1: "0px 2px 12px -8px rgba(25, 19, 38, 0.1), 0px 1px 1px rgba(25, 19, 38, 0.05)",
+ ...shadows,
},
tag: lightTag,
};
diff --git a/src/theme/shadows.ts b/src/theme/shadows.ts
new file mode 100644
index 000000000..9bb488503
--- /dev/null
+++ b/src/theme/shadows.ts
@@ -0,0 +1,7 @@
+const shadows = {
+ active: "0px 0px 0px 1px #0098A1, 0px 0px 4px 8px rgba(31, 199, 212, 0.4)",
+ success: "0px 0px 0px 1px #31D0AA, 0px 0px 0px 4px rgba(49, 208, 170, 0.2)",
+ warning: "0px 0px 0px 1px #ED4B9E, 0px 0px 0px 4px rgba(237, 75, 158, 0.2)",
+};
+
+export default shadows;