feat(colors): Add card gradients to colors theme (#61)

* feat(colors): Add card gradients to colors theme and import these to cardHeaderBackground * fix(snapshots): Unrelated snapshot fix * chore(card-header): Rename cardHeader gradient and break card headers color theme nesting * chore(card-header): Reinstate whitespacing in amended file
pancakeswap · Apr 13, 2021 · 4c7a8ac · 4c7a8ac
1 parent 3d9ba48
commit 4c7a8ac
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 6 deletions.
diff --git a/packages/pancake-uikit/src/components/Card/theme.ts b/packages/pancake-uikit/src/components/Card/theme.ts
@@ -9,9 +9,9 @@ export const light: CardTheme = {
   boxShadowSuccess: shadows.success,
   boxShadowWarning: shadows.warning,
   cardHeaderBackground: {
-    default: "linear-gradient(111.68deg, #F2ECF2 0%, #E8F2F6 100%)",
-    blue: "linear-gradient(180deg, #A7E8F1 0%, #94E1F2 100%)",
-    violet: "linear-gradient(180deg, #E2C9FB 0%, #CDB8FA 100%)",
+    default: lightColors.gradients.cardHeader,
+    blue: lightColors.gradients.blue,
+    violet: lightColors.gradients.violet,
   },
   dropShadow: "drop-shadow(0px 1px 4px rgba(25, 19, 38, 0.15))",
 };
@@ -23,9 +23,9 @@ export const dark: CardTheme = {
   boxShadowSuccess: shadows.success,
   boxShadowWarning: shadows.warning,
   cardHeaderBackground: {
-    default: "linear-gradient(166.77deg, #3B4155 0%, #3A3045 100%)",
-    blue: "linear-gradient(180deg, #00707F 0%, #19778C 100%)",
-    violet: "linear-gradient(180deg, #6C4999 0%, #6D4DB2 100%)",
+    default: darkColors.gradients.cardHeader,
+    blue: darkColors.gradients.blue,
+    violet: darkColors.gradients.violet,
   },
   dropShadow: "drop-shadow(0px 1px 4px rgba(25, 19, 38, 0.15))",
 };
diff --git a/packages/pancake-uikit/src/theme/colors.ts b/packages/pancake-uikit/src/theme/colors.ts
@@ -32,6 +32,9 @@ export const lightColors: Colors = {
   card: "#FFFFFF",
   gradients: {
     bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)",
+    cardHeader: "linear-gradient(111.68deg, #F2ECF2 0%, #E8F2F6 100%)",
+    blue: "linear-gradient(180deg, #A7E8F1 0%, #94E1F2 100%)",
+    violet: "linear-gradient(180deg, #E2C9FB 0%, #CDB8FA 100%)",
   },
 };
 
@@ -55,5 +58,8 @@ export const darkColors: Colors = {
   card: "#27262c",
   gradients: {
     bubblegum: "linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)",
+    cardHeader: "linear-gradient(166.77deg, #3B4155 0%, #3A3045 100%)",
+    blue: "linear-gradient(180deg, #00707F 0%, #19778C 100%)",
+    violet: "linear-gradient(180deg, #6C4999 0%, #6D4DB2 100%)",
   },
 };
diff --git a/packages/pancake-uikit/src/theme/types.ts b/packages/pancake-uikit/src/theme/types.ts
@@ -29,6 +29,9 @@ export type Shadows = {
 
 export type Gradients = {
   bubblegum: string;
+  cardHeader: string;
+  blue: string;
+  violet: string;
 };
 
 export type Colors = {