Update colors (#99)

* fix: Update colors * fix: Update snapshots
pancakeswap · May 11, 2021 · 17c37a4 · 17c37a4
1 parent 7356586
commit 17c37a4
Show file tree

Hide file tree

Showing 16 changed files with 56 additions and 50 deletions.
diff --git a/packages/pancake-uikit/src/__tests__/components/alert.test.tsx b/packages/pancake-uikit/src/__tests__/components/alert.test.tsx
@@ -18,14 +18,14 @@ it("renders correctly", () => {
     }
 
     .c5 {
-      color: #452A7A;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 600;
       line-height: 1.5;
     }
 
     .c6 {
-      color: #452A7A;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 400;
       line-height: 1.5;

diff --git a/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx b/packages/pancake-uikit/src/__tests__/components/balanceinput.test.tsx
@@ -9,7 +9,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c3 {
-      color: #8f80ba;
+      color: #7A6EAA;
       font-size: 12px;
       font-weight: 400;
       line-height: 1.5;
@@ -22,7 +22,7 @@ it("renders correctly", () => {
       border: 0;
       border-radius: 16px;
       box-shadow: inset 0px 2px 2px -1px rgba(74,74,104,0.1);
-      color: #452A7A;
+      color: #280D5F;
       display: block;
       font-size: 16px;
       height: 40px;
@@ -32,19 +32,19 @@ it("renders correctly", () => {
     }
 
     .c1::-webkit-input-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c1::-moz-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c1:-ms-input-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c1::placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c1:disabled {
@@ -76,19 +76,19 @@ it("renders correctly", () => {
     }
 
     .c2::-webkit-input-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c2::-moz-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c2:-ms-input-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c2::placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c2:focus:not(:disabled) {

diff --git a/packages/pancake-uikit/src/__tests__/components/buttonmenu.test.tsx b/packages/pancake-uikit/src/__tests__/components/buttonmenu.test.tsx
@@ -143,7 +143,7 @@ it("renders correctly", () => {
 
     .c3 {
       background-color: transparent;
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c3:hover:not(:disabled):not(:active) {

diff --git a/packages/pancake-uikit/src/__tests__/components/card.test.tsx b/packages/pancake-uikit/src/__tests__/components/card.test.tsx
@@ -17,7 +17,7 @@ it("renders correctly", () => {
       border: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05);
       border-radius: 32px;
       box-shadow: 0px 2px 12px -8px rgba(25,19,38,0.1),0px 1px 1px rgba(25,19,38,0.05);
-      color: #452A7A;
+      color: #280D5F;
       overflow: hidden;
       position: relative;
     }

diff --git a/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx b/packages/pancake-uikit/src/__tests__/components/fallingbunnies.test.tsx
@@ -18,7 +18,7 @@ it("renders correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #452A7A;
+      fill: #280D5F;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;

diff --git a/packages/pancake-uikit/src/__tests__/components/heading.test.tsx b/packages/pancake-uikit/src/__tests__/components/heading.test.tsx
@@ -7,7 +7,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c0 {
-      color: #452A7A;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 600;
       line-height: 1.5;

diff --git a/packages/pancake-uikit/src/__tests__/components/input.test.tsx b/packages/pancake-uikit/src/__tests__/components/input.test.tsx
@@ -13,7 +13,7 @@ it("renders correctly", () => {
       border: 0;
       border-radius: 16px;
       box-shadow: inset 0px 2px 2px -1px rgba(74,74,104,0.1);
-      color: #452A7A;
+      color: #280D5F;
       display: block;
       font-size: 16px;
       height: 40px;
@@ -23,19 +23,19 @@ it("renders correctly", () => {
     }
 
     .c0::-webkit-input-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c0::-moz-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c0:-ms-input-placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c0::placeholder {
-      color: #8f80ba;
+      color: #7A6EAA;
     }
 
     .c0:disabled {

diff --git a/packages/pancake-uikit/src/__tests__/components/spinner.test.tsx b/packages/pancake-uikit/src/__tests__/components/spinner.test.tsx
@@ -10,7 +10,7 @@ it("renders correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #452A7A;
+      fill: #280D5F;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;

diff --git a/packages/pancake-uikit/src/__tests__/components/svg.test.tsx b/packages/pancake-uikit/src/__tests__/components/svg.test.tsx
@@ -14,7 +14,7 @@ it("renders correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #452A7A;
+      fill: #280D5F;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;

diff --git a/packages/pancake-uikit/src/__tests__/components/tabmenu.test.tsx b/packages/pancake-uikit/src/__tests__/components/tabmenu.test.tsx
@@ -25,7 +25,7 @@ it("renders correctly", () => {
     }
 
     .c2 {
-      border-bottom: 2px solid #8f80ba;
+      border-bottom: 2px solid #7A6EAA;
       overflow-x: scroll;
       -ms-overflow-style: none;
       -webkit-scrollbar-width: none;
@@ -74,7 +74,7 @@ it("renders correctly", () => {
       font-size: 16px;
       font-weight: 600;
       color: #FFFFFF;
-      background-color: #8f80ba;
+      background-color: #7A6EAA;
     }
 
     .c5 {
@@ -97,7 +97,7 @@ it("renders correctly", () => {
       border-radius: 16px 16px 0 0;
       font-size: 16px;
       font-weight: 600;
-      color: #8f80ba;
+      color: #7A6EAA;
       background-color: #eeeaf4;
     }
 

diff --git a/packages/pancake-uikit/src/__tests__/components/text.test.tsx b/packages/pancake-uikit/src/__tests__/components/text.test.tsx
@@ -7,7 +7,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c0 {
-      color: #452A7A;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 400;
       line-height: 1.5;

diff --git a/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/menu.test.tsx
@@ -74,7 +74,7 @@ it("renders correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #8f80ba;
+      fill: #7A6EAA;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -84,7 +84,7 @@ it("renders correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #452A7A;
+      fill: #280D5F;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -94,7 +94,7 @@ it("renders correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #452A7A;
+      fill: #280D5F;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;
@@ -276,7 +276,7 @@ it("renders correctly", () => {
     }
 
     .c4 {
-      color: #452A7A;
+      color: #280D5F;
       padding: 0 8px;
       border-radius: 8px;
     }
@@ -359,7 +359,7 @@ it("renders correctly", () => {
       padding: 0 16px;
       font-size: 16px;
       background-color: transparent;
-      color: #8f80ba;
+      color: #7A6EAA;
       box-shadow: inset 4px 0px 0px #1FC7D4;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
@@ -380,7 +380,7 @@ it("renders correctly", () => {
     }
 
     .c12 svg {
-      fill: #8f80ba;
+      fill: #7A6EAA;
     }
 
     .c12:hover {
@@ -391,7 +391,7 @@ it("renders correctly", () => {
       background-clip: text;
       -webkit-animation: fKQuCC 3s ease-in-out infinite;
       animation: fKQuCC 3s ease-in-out infinite;
-      background: linear-gradient(139.73deg,#E6FDFF 0%,#F3EFFF 100%);
+      background: linear-gradient(139.73deg,#E5FDFF 0%,#F3EFFF 100%);
       background-size: 400% 100%;
     }
 
@@ -409,7 +409,7 @@ it("renders correctly", () => {
       padding: 0 16px;
       font-size: 16px;
       background-color: transparent;
-      color: #8f80ba;
+      color: #7A6EAA;
       box-shadow: none;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
@@ -430,7 +430,7 @@ it("renders correctly", () => {
     }
 
     .c16 svg {
-      fill: #8f80ba;
+      fill: #7A6EAA;
     }
 
     .c16:hover {
@@ -441,7 +441,7 @@ it("renders correctly", () => {
       background-clip: text;
       -webkit-animation: fKQuCC 3s ease-in-out infinite;
       animation: fKQuCC 3s ease-in-out infinite;
-      background: linear-gradient(139.73deg,#E6FDFF 0%,#F3EFFF 100%);
+      background: linear-gradient(139.73deg,#E5FDFF 0%,#F3EFFF 100%);
       background-size: 400% 100%;
     }
 

diff --git a/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/modal.test.tsx
@@ -12,7 +12,7 @@ it("renders correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c5 {
-      color: #452A7A;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 600;
       line-height: 1.5;

diff --git a/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx b/packages/pancake-uikit/src/__tests__/widgets/walletModal.test.tsx
@@ -8,7 +8,7 @@ it("renders ConnectModal correctly", () => {
   expect(asFragment()).toMatchInlineSnapshot(`
     <DocumentFragment>
       .c5 {
-      color: #452A7A;
+      color: #280D5F;
       font-size: 16px;
       font-weight: 600;
       line-height: 1.5;
@@ -62,7 +62,7 @@ it("renders ConnectModal correctly", () => {
       -webkit-align-self: center;
       -ms-flex-item-align: center;
       align-self: center;
-      fill: #452A7A;
+      fill: #280D5F;
       -webkit-flex-shrink: 0;
       -ms-flex-negative: 0;
       flex-shrink: 0;

diff --git a/packages/pancake-uikit/src/theme/colors.ts b/packages/pancake-uikit/src/theme/colors.ts
@@ -20,18 +20,20 @@ export const lightColors: Colors = {
   background: "#FAF9FA",
   backgroundDisabled: "#E9EAEB",
   backgroundAlt: "#FFFFFF",
+  cardBorder: "#E7E3EB",
   contrast: "#191326",
-  dropdown: "#F6F6F6",
+  dropdown: "#EEEEEE",
   invertedContrast: "#FFFFFF",
   input: "#eeeaf4",
   inputSecondary: "#d7caec",
   tertiary: "#EFF4F5",
-  text: "#452A7A",
+  text: "#280D5F",
   textDisabled: "#BDC2C4",
-  textSubtle: "#8f80ba",
+  textSubtle: "#7A6EAA",
   borderColor: "#E9EAEB",
   gradients: {
-    bubblegum: "linear-gradient(139.73deg, #E6FDFF 0%, #F3EFFF 100%)",
+    bubblegum: "linear-gradient(139.73deg, #E5FDFF 0%, #F3EFFF 100%)",
+    inverseBubblegum: "linear-gradient(139.73deg, #F3EFFF 0%, #E5FDFF 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%)",
@@ -43,22 +45,24 @@ export const darkColors: Colors = {
   ...baseColors,
   ...brandColors,
   secondary: "#9A6AFF",
-  background: "#100C18",
+  background: "#08060B",
   backgroundDisabled: "#3c3742",
   backgroundAlt: "#27262c",
+  cardBorder: "#383241",
   contrast: "#FFFFFF",
-  dropdown: "#1E1D20",
+  dropdown: "#100C18",
   invertedContrast: "#191326",
-  input: "#483f5a",
-  inputSecondary: "#66578D",
+  input: "#372F47",
+  inputSecondary: "#262130",
   primaryDark: "#0098A1",
   tertiary: "#353547",
-  text: "#EAE2FC",
+  text: "#F4EEFF",
   textDisabled: "#666171",
-  textSubtle: "#A28BD4",
+  textSubtle: "#B8ADD2",
   borderColor: "#524B63",
   gradients: {
     bubblegum: "linear-gradient(139.73deg, #313D5C 0%, #3D2A54 100%)",
+    inverseBubblegum: "linear-gradient(139.73deg, #3D2A54 0%, #313D5C 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,7 @@ export type Shadows = {
 
 export type Gradients = {
   bubblegum: string;
+  inverseBubblegum: string;
   cardHeader: string;
   blue: string;
   violet: string;
@@ -44,6 +45,7 @@ export type Colors = {
   success: string;
   failure: string;
   warning: string;
+  cardBorder: string;
   contrast: string;
   dropdown: string;
   invertedContrast: string;